传递参数 angular 2 传统方式

Question

我正在尝试以这种格式 www.domain.com?param=value 将参数传递给一个组件，但是 Angular 继续像这样发送参数 www.domain.com;param=value。为什么要将 ? 替换为 ;？

这是我的路由配置文件：

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']);

我收到未定义的路由错误。

Answer 1

Angular提供三种类型的参数：

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

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

传递参数 angular 2 传统方式

Passing params angular 2 traditional way

routes

angular2-routing

angular