传递params angular 2传统方式

我想将参数传递给这种格式的一个组件www.domain.com?param=value，但是Angular继续发送像这样的参数www.domain.com;param=value。为什么要替换?为;？传递params angular 2传统方式

这是我的路线的conf：

const router: Routes = [ 
    {path: '', redirectTo: '/shops', pathMatch: 'full'}, 
    {path: 'shops', component: ShopComponent, canActivate: [AuthManager]}, 
    {path: 'shop/new', component: NewShopComponent, canActivate: [AuthManager]}, 
    {path: 'shop/new/:id', component: NewShopComponent, canActivate: [AuthManager]}, 
    {path: 'login', component: LoginComponent}, 
    {path: 'register', component: RegisterComponent}, 
    {path: '**', component: ShopComponent} 
];

，这我怎么值传递

this._router.navigate(['shops', {id: id}]);

如果我通过它像

this._router.navigate(['shops?id=id']);

我得到了一个未定义的路线错误。

来源

2017-06-02 user3613976

角度提供了三种类型的参数：

必需的参数
可选参数
查询参数

外观URL和导航的语法使用的参数是不同的取决于你想使用的参数类型。

如果你想使用“？”样式，那么你想要的查询参数。

查询参数：

不包括在路由路径配置。所以如果你想查询参数，不要将：id添加到路径中。

不是这个：

{path: 'shop/new/:id', component: NewShopComponent, canActivate: [AuthManager]},

而会将这个：

{path: 'shop/new', component: NewShopComponent, canActivate: [AuthManager]},

然后你导航到该路线是这样的：

this.router.navigate(['/shops'], 
    { 
    queryParams: { id: id } 
    } 
);

如果你想如何更多信息使用路由...检查了这一点：https://app.pluralsight.com/library/courses/angular-routing/table-of-contents

来源

2017-06-02 14:48:41 DeborahK

如果我使用这种方式 this.router.navigate（[ '/商店']， { queryParams：{ID：ID}} ）; 我的路线成为/商店; id =“id”< - 这是错误的，我想这个结果：/ shops？id =“id” – user3613976

你可以提供一个plunker？使用queryParams应该导致你正在寻找的URL：/ shops？id =“id”。 – DeborahK

传递params angular 2传统方式

回答

相关问题