Условно примените либо 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, который вызывает дублирование кода?

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

Answer 2

Попробуйте следующее

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