有条件地应用href或routerLink而不带* ngIf

时间:2019-03-15 15:42:29

标签: angular angular-routing angular-routerlink

我的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导致代码重复?

2 个答案:

答案 0 :(得分:3)

我建议您将策略移至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);
   }
}

答案 1 :(得分:0)

尝试以下

 <ng-container>
       <a class="link"
          [attr.href]="item.url ? item.url : ''"
          [routerLink]="item.routerLink ? item.routerLink: ''"
          rel="noopener noreferrer"
          tabindex="-1"
       >
         {{item.label}}
       </a>
    <ng-container>