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

【问题标题】：how to pass route params in [routerLink] angular 2如何在 [routerLink] 角度 2 中传递路由参数
【发布时间】：2016-05-29 06:37:43
【问题描述】：

我正在尝试创建一个角度为 2 的应用程序，并且想要传递参数以在 [routerLink] 中标记 a，我希望创建一个这样的链接：

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

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

【问题讨论】：

Angular2 Routerlink: add query paramters的可能重复

标签： angular angular-routing angular-routerlink

【解决方案1】：

您可以使用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的路线

祝你好运。

【讨论】：

【解决方案2】：

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

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

在接收端，您必须通过使用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 { }

【讨论】：

我不想使用这种方式，但它没问题以及如何绑定它？我想在输入单元格参数上键入时绑定在标签中。
不仅仅是将您的输入字段值绑定到[(ngModel)]，然后将该变量作为路由器参数传递。 @AlirezaValizade 看到我更新的答案。
`

تلفن همراه

` 我使用 FormBuilder 但不工作
试试这个<form [ngFormModel]="model" (ngSubmit)="submit()"> <div> <input id="cell" type="text" name="cell" ngControl="cell" [(ngModel)]='cellValue'> <label for="cell">تلفن همراه</label> </div> </form> <a [routerLink]="['/SignUp' ,{ cell: cellValue }]" ></a>
您的示例网址将显示为：auth/signup/1654654654 而不是 auth/signup?cell=1654654654，因为您在路径中使用了 /item/:id

【解决方案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>

【讨论】：

您可以使用 [(ngModel)] 绑定并使用 routeParams

【解决方案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

【讨论】：

已经在现有答案中提到了您答案的所有内容，没有新添加的答案。
在哪个答案中？@PardeepJain
看我的回答@Shaileshab
当 url 显示为 auth/signup/1654654654 和 auth/signup?cell=1654654654 时提到了哪个答案。你提到过？ @PardeepJain
问题不在于如何显示 url，问题在于如何传递参数不是吗？

【解决方案5】：

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

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

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

[queryParams]="{name: value}"

在模板中。

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

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

【讨论】：