不正確なURLを返すAnguar2 routerLink

Question

私はangular2ルータを実装しようとしています。 '/ detail /：index'のようなURLパターンを使って '：detail/1234'のようなものを渡しています。 "someDomain/detail /％3AitemIndex; itemIndex = 123"と表示されます。これは "/ detail /：itemIndex; itemIndex = 123"を意味します。どのようにこれを修正し、 "/ detail/123" OR "/ detail/itemIndex = 123"と期待される結果を取得し、 "：itemIndex;"そして、（私のタイプミスを無視してください）

が

export const rootRouterConfig: Routes = [ 
    { path: '', redirectTo: 'SomeHomeComponent', pathMatch: 'full' }, 
    { path: 'home', component: SomeHomeComponent }, 
    { path: 'detail/:itemIndex', component: SomeDetailComponent }]; 

"list.component.html"

<a *ngFor="let item of items; let i = index" 
[routerLink]="['/detail/:itemIndex', { itemIndex: i }]"> 
{ item.name } 
</a> 

"SomeDetail.Component.tsを" "app.routes.ts" スラッシュでそれを置き換えます

import { ActivatedRoute } from '@angular/router'; 

export class SomeDetailComponent { 
    private itemIndex:string; 

    constructor(private route: ActivatedRoute){ 

    } 
    ngOnInit() { 

    this.route.params.subscribe(params => { this.itemIndex = params['itemIndex']; 
    }); 
} 
} 

Answer 1

用途：

「list.component.html」このことができます

<a *ngFor="let item of items; let i = index" 
    [routerLink]="['/detail', i]"> 
    {{ item.name }} 
</a> 

・ホープ..

RouterLinkドキュメントに記載されているように

Answer 2

、あなたは複数のパラメータを持つ複数の変数を連結することができます。

あなたのコードでは、今になってしまう：

<a *ngFor="let item of items; let i = index" [routerLink]="['/detail/', i ]"> 
    {{ item.name }} 
</a> 

Answer 3

PS：ただの提案

* ngForまたはそのような何かを使用して結合、それは次のようにアプリのエラーやクラッシュを防ぎときelvis ?演算子を使用することをお勧めし、

<a *ngFor="let item of items; let i = index" 
[routerLink]="['/detail/:itemIndex', { itemIndex: i }]"> 
{{ item?.name }} 
</a> 

ここ

私が使用している{{item?.name}}