Невозможно использовать href с routerLink одновременно с условными атрибутами в Angular

Question

У меня есть компонент кнопки в Angular, который имеет следующие входы; internalLink или externalLink.

Я пытаюсь реализовать компонент для использования атрибута href, если строка передается через externalLink, но используется директива [routerLink], передается externalLink. Я делаю это путем условного применения атрибутов, как показано ниже.

Шаблон ButtonComponent:

<a 
  class="btn"
  [href]="externalLink ? externalLink : null"
  [routerLink]="internalLink ? internalLink : null">
  <ng-content></ng-content>
</a>

Однако, это не работает, как я надеялся. Если передано externalLink, а externalLink опущено, я ожидал, что значение href ссылки будет равно externalLink. Тем не менее, он имеет значение "/"

Stackblitz: https://stackblitz.com/edit/angular-button-link-external-internal-inputs

Answer 1

Существующий ответ не будет работать из-за повторного использования <ng-content>, хотя я согласен с концепцией объявления отдельного элемента для каждой ссылки.

Существующий ответ

<a class="btn" *ngIf="externalLink" [href]="externalLink"> 
  <ng-content></ng-content> 
</a>

<a class="btn" *ngIf="internalLink" [routerLink]="internalLink"> 
  <ng-content></ng-content> 
</a>

Почему это не сработает

Это не сработает, потому что Angular выберет только последний <ng-content> для проецирования на - даже если он внутри *ngIf. Я заметил , что это также происходит с <router-outlet>.

Исправление

Решение состоит в том, чтобы визуализировать <ng-content> только один раз внутри <ng-template>, а затем сослаться на это <ng-template> из нескольких <ng-container> объявлений.

Таким образом, решение теперь становится таким:

<a 
  *ngIf="externalLink"
  class="btn"
  [href]="externalLink ? externalLink : null">
  <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
</a>
<a 
  *ngIf="internalLink"
  class="btn"
  [routerLink]="internalLink ? internalLink : null">
  <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
</a>
<ng-template #contentTpl><ng-content></ng-content></ng-template>

Это расширение исходного ответа @Sumit Parakh. Они предложили решение разделения ссылок, я просто исправил использование <ng-content>, которое было слишком сложным для комментария.

Исправлено в этом Stackblitz: https://stackblitz.com/edit/angular-button-link-external-internal-inputs-fixed

Answer 2

Почему бы просто не разделить их на два утверждения?

<a class="btn" *ngIf="externalLink" [href]="externalLink"> <ng-content></ng-content> </a>


<a class="btn" *ngIf="internalLink" [routerLink]="internalLink"> <ng-content></ng-content> </a>