如何通過在[routerLink]路線PARAMS角2

Question

我試圖創建角2的應用程序，並且希望通過PARAMS標記一個在[routerLink]我想了解創建這樣一個鏈接：

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

我不知道如何通過模板cell ...

Answer 1

如果你打算使用angula2測試那麼你必須發送參數像這樣同時做路由。

<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 { } 

Answer 2

你可以試試下面的代碼： 您的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 3

在Angular2中同時支持路由中的查詢參數和路徑變量。

使用，如：

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

和組件：

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

然後在URL所示一樣，你要/auth/signup?cell=1654654654

NB：

如果在你的路徑包含電池在組件中作爲參數如：/auth/signup/:cell和routelink類似於：[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

接受的答案已過時，恕我直言，不回答問題。

但是問題並不清楚：「路由參數」在路徑部分URL中，但問題是關於「查詢參數」後面的'？' （問號）。

所以，這個問題的答案是在answer of @Akash：你在模板中使用

[queryParams]="{name: value}" 

。

因此，這錨將參照/path/with/myparam?cell=1654654654：

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