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]},

RATHER this：

{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

传递params棱角2传统方式

1 个答案: