Question

我正在尝试实现angular2路由器，并使用像'/ detail /：index'这样的URL模式传递类似'：detail / 1234'的内容。但它得到“someDomain / detail /％3AitemIndex; itemIndex = 123”，意思是“/ detail /：itemIndex; itemIndex = 123”。如何解决这个问题并获得预期的结果，即“/ detail / 123”或“/ detail / itemIndex = 123”并摆脱“：itemIndex;”并用斜线替换它（请忽略我的拼写错误）

“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

使用：

“list.component.html”

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

希望这会有所帮助..

Answer 2

如RouterLink文档中所述，您可以将多个变量与多个参数连接起来。

您的代码现在变为：

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

Anguar2 routerLink返回不准确的URL

3 个答案: