如何在 [routerLink] angular 2 中传递路由参数

Question

我正在尝试使用 angular 2 创建一个应用程序，并希望将参数传递给 [routerLink] 中的标记 a，我希望像这样创建一个 link :

<a href="/auth/signup?cell=1654654654"></a>

我不知道如何在模板中传递 cell...

Answer 1

您可以试试下面的代码：你的 ts 文件将是这样的：

@Component({ ... })
@Routes([
    {
        path: '/auth/signup?cell=1654654654', component: AuthComponent
    }
])
export class AppComponent  implements OnInit {
    constructor(private router: Router) {}
}

在你的 html 文件中，

<a [routerLink]="['//auth/signup?cell=1654654654']"></a>

Answer 2

如果你打算使用 angula2 beta 那么你必须在进行路由时发送这样的参数。

<a [routerLink]="['signup',{cell:cellValue}]">Routing with parameter</a>                        
<input type='text' [(ngModel)]='cellValue'>

并且在接收方比您必须通过使用 RouteParams.

获取参数

nut 如果你打算使用 angular2 RC 而不是你必须使用 RouteSegment 而不是在 angular2 RC 中使用 RouteParams。像这样：-

import { Component } from '@angular/core';

import { Routes, RouteSegment, ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: 'about-item',
  template: `<h3>About Item Id: {{id}}</h3>`,
  Directives: [ROUTER_DIRECTIVES]
})

class AboutItemComponent { 

  id: any;

  constructor(routeSegment: RouteSegment) {
    this.id = routeSegment.getParam('id');    
  }
}

@Component({

    selector: 'app-about',

    template: `

      <h2>About</h2>
        <a [routerLink]="['/about/item', 1]">Item 1</a>
        <a [routerLink]="['/about/item', 2]">Item 2</a>
      <div class="inner-outlet">
        <router-outlet></router-outlet>
      </div>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@Routes([

  { path: '/item/:id', component: AboutItemComponent }

])

export class AboutComponent { }

Answer 3

在 Angular2 中支持路由中的查询参数和路径变量。

像这样使用：

<a [routerLink]="['Signup', {cell: '1654654654'}]">Signup</a>

并在组件中：

@RouteConfig([
    new Route({ path: '/auth/signup', component: SignupComponent, name: 'Signup'})
])

然后在url中显示你想要的样子/auth/signup?cell=1654654654

注意：

如果在您的路径中包含组件中的单元格作为参数，例如：/auth/signup/:cell 和路由链接，例如：[routerLink]="['Signup', {cell: '1654654654'}]" 那么 url 将显示为：auth/signup/1654654654

Answer 4

您可以使用 queryParams 与 routerLink 一起工作以构建 url。例如：

<a [routerLink]="['/profiles']" 
[queryParams]="{min:45,max:50,location:29293}">
  Search
</a>

这将构建一条类似于http://localhost:3000/profiles?min=45&max=50&location=29923

的路线

祝你好运。

Answer 5

接受的答案已过时，恕我直言，没有回答问题。

但是问题不明确："route params" 位于 URL 的 path 部分，但问题是关于 "query params"在'?'之后（问号）。

所以问题的答案在：你必须使用

[queryParams]="{name: value}"

在模板中。

所以这个锚点将引用 /path/with/myparam?cell=1654654654:

<a [routerLink]="['/path/with/:paramName', {paramName: "myparam"}]"
   [queryParams]="{cell: 1654654654}"
></a>

如何在 [routerLink] angular 2 中传递路由参数

how to pass route params in [routerLink] angular 2

angular

angular-routing

angular-routerlink