角动态routerLink

Question

我有一个列表，它包含字符串，在这个列表中我使用*ngFor没有问题。我在ngFor中使用索引来确定去哪条路线，但是我发现了这个设计中的缺陷，所以我想改变它。在列表组件中，我有一个字符串数组，就像列表项一样。如何使用索引路由到此列表的内容。

我现在的代码是这样的：

<div class="col-md-12">
        <ul class="list-group">
            <a 
            class="list-group-item"
            routerLinkActive="active"
            style="cursor: pointer;"
            [routerLink]="[i]"
            *ngFor="let l of list; let i = index" >
                {{ l }}
            </a>
        </ul>
        
    </div>

我想要取得这样的成就：

<div class="col-md-12">
        <ul class="list-group">
            <a 
            class="list-group-item"
            routerLinkActive="active"
            style="cursor: pointer;"
            [routerLink]="[id[i]]"
            *ngFor="let l of list; let i = index" >
                {{ l }}
            </a>
        </ul>
        
    </div>

此列表的component.ts如下所示：

@Input() list: string[] = [];
  @Input() urls: string[] = [];
  @Output() btnpress = new EventEmitter<string>();

  id: string[] = [];

  constructIdList() {
    this.urls.forEach(url => {
      if(url.length > 0) {}
      let tmp = url.split('/');
      if(tmp.length > 0) {
        console.log(tmp.pop());
      }
    });
  }

Answer 1

添加一个方法应该可以做到这一点：

TS

getRoute(ndx: number): string {
    return "[" + id[ndx] + "]";
}

[routerLink]="getRoute(i)"