传递参数 angular 2 传统方式 [英] Passing params angular 2 traditional way

问题描述

我正在尝试以这种格式将参数传递给一个组件 www.domain.com?param=value，但 Angular 不断发送这样的参数 www.domain.com;param=价值.为什么将 ? 替换为 ;?

I am trying to pass parameters to one component in this format www.domain.com?param=value, but Angular keep sending parameters like this www.domain.com;param=value. Why replace ? for ;?

这是我的路线配置:

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

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

i get undefined route error.

推荐答案

Angular 提供了三种类型的参数:

Angular provides three types of parameters:

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

URL 的外观和使用参数导航的语法因您要使用的参数类型而异.

The look of the URL and the syntax for navigating using the parameters is different depending on which type of parameter you want to use.

如果你想使用?"样式，然后你想要查询参数.

If you want to use the "?" style, then you want the query parameters.

查询参数:

• 不包含在路由路径配置中.因此，如果您需要查询参数，请不要将 :id 添加到路径中.

不是这个:

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

相反:

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

然后你导航到这样的路线:

Then you navigate to the route like this:

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

如果您想了解有关如何使用路由的更多信息……请查看:https://app.pluralsight.com/library/courses/angular-routing/table-of-contents

If you want more information on how to use routing ... check this out: https://app.pluralsight.com/library/courses/angular-routing/table-of-contents

这篇关于传递参数 angular 2 传统方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！