angular - 有条件地应用 href 或 routerLink 而不使用 *ngIf

Question

我的 Angular 应用程序模板中有以下代码，但它无法按预期工作:

<ng-container *ngFor="let item of items"">
   <a class="link"
      [attr.href]="item.url"
      [routerLink]="item.routerLink"
      rel="noopener noreferrer"
      tabindex="-1"
   >
     {{item.label}}
   </a>
<ng-container>
...

我在这里想做的是迭代项目数组并显示链接列表。问题是该项目可以具有 url 属性或 routerLink。根据项目具有的属性，我需要应用 href 属性或 routerLink。

有没有办法在不使用 *ngIf 的情况下实现这一点，因为 *ngIf 会导致代码重复？

Answer 1

我建议您将策略移至component.ts

<a (click)="navigateToLink(item)">

和

navigateToLink( item ){
   if( item.routerLink ){
      this.router.navigate([item.routerLink]);
   }else if( item.url ){
      this.windows.open(item.url);
   }
}