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

Question

我正在尝试使用 angular 2 创建一个应用程序，并希望通过参数在 [routerLink] 中标记 a，我希望创建一个这样的链接：

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

我不知道如何传入cell模板...

Answer 1

您可以使用queryParamswhichrouterLink来构建. url例如：

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

这将建立一个像http://localhost:3000/profiles?min=45&max=50&location=29923

祝你好运。

Answer 2

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

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

而不是在接收端，你必须通过 using 获取参数RouteParams。

如果您要使用 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

您可以尝试以下代码：您的 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 4

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

像这样使用：

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

在组件中：

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

然后显示在您想要的网址中/auth/signup?cell=1654654654

注意：

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

Answer 5

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

但是问题尚不清楚：“路由参数”在 URL 的路径部分，但问题是关于“？”之后的“查询参数”。（问号）。

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

[queryParams]="{name: value}"

在模板中。

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

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