Anguar2 routerLink gibt ungenaue URL zurück

Question

Ich versuche Angular2-Router zu implementieren und benutze das URL-Muster wie '/ detail /: index', um etwas wie ': detail/1234' zu übergeben. aber es wird "someDomain/detail /% 3AitemIndex; itemIndex = 123", was "/ detail /: itemIndex; itemIndex = 123" bedeutet. Wie man das behebt und das erwartete Ergebnis erhält, das "/ detail/123" ODER "/ detail/itemIndex = 123" ist und das ": itemIndex;" und ersetzen sie durch Schrägstrich (Bitte ignorieren Sie meine Tippfehler)

"app.routes.ts"

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"

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

Verwendung:

"List.component.html"

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

this helps ..

Answer 2

Wie in der RouterLink Dokumentation angegeben, können Sie mehrere Variable mit mehreren Parameter verketten.

würde Ihr Code jetzt worden:

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

Answer 3

PS: nur Vorschlag

besser elvis ? Operator zu verwenden, wenn * ngFor oder etwas ähnliches mit Bindung, es Fehler oder Absturz von App wie diese verhindert,

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

hier habe ich verwendet {{item?.name}}