Блог

Главная - Вопросы по программированию - Условно применять либо href, либо routerLink без *ngIf

Условно применять либо href, либо routerLink без *ngIf

#angular #angular-routing #angular-routerlink

#angular #angular-маршрутизация #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, который вызывает дублирование кода?

Ответ №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);
   }
}

Комментарии:

1. Я буквально подумал то же самое, (это то, что я бы сделал или просто использовал * ngIf. Я не знаю, может быть, он просто не хочет использовать ifs по какой-то определенной причине

2. Это не рекомендуется. href и click — это разные вещи, и click, вероятно, будет иметь меньшее удобство использования

Ответ №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>