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

问题描述

我正在尝试以以下格式将参数传递给一个组件： www.domain.com?param=value ，但是Angular仍会像这样发送参数 www.domain.com; param = value 。为什么用代替？？？

这是我的路由配置：

 常量路由器：路由= [
 {path：``，redirectTo：'/ shops'， pathMatch：完整}，
 {路径：商店，组件：ShopComponent，canActivate：[AuthManager]}，
 {路径： shop / new，组件：NewShopComponent，canActivate：[AuthManager ]}，
 {路径： shop / new /：id，组件：NewShopComponent，canActivate：[AuthManager]}，
 {路径： login，组件：LoginComponent}，
 {path：'register'，component：RegisterComponent}，
 {path：'**'，component：ShopComponent} 
]; 
  

这就是我传递值的方式

  this._router.navigate（['shops'，{id：id}]）; 
  

如果我通过

  this._router.navigate（['shops？id = id']）; 
  

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

解决方案

Angular提供三种类型的参数：

• 必需参数


• 可选参数


• 查询参数

URL的外观和导航语法

如果要使用？，则使用参数的方式会有所不同。

样式，则需要查询参数。

查询参数：

• 未包含在路由路径配置中。因此，如果要查询参数，请不要在路径中添加：id。

不要这样：

  {路径：'shop / new /：id'，组件：NewShopComponent，canActivate：[AuthManager]}，
  

对此：

  {路径： shop / new'，组件：NewShopComponent，canActivate：[AuthManager]}，
  

然后您导航到像这样的路线：

  this.router.navigate（['/ shops']，
 {
 queryParams：{id：id} 
} 
）; 
  

如果您想了解有关如何使用路由的更多信息，请查看以下内容： https://app.pluralsight.com/library/courses/angular-routing/目录

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 ;?

This is my route 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}
];

and this how I pass the values

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

if I pass it like

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

i get undefined route error.

解决方案

Angular provides three types of parameters:

• Required parameters
• Optional parameters
• Query parameters

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.

Query Parameters:

• Are NOT included in the route path configuration. So if you want query parameters, do NOT add the :id to the path.

NOT this:

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

RATHER this:

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

Then you navigate to the route like this:

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

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屋！