Как выбрать между фактическим routerLink и внутренней привязкой с Angular 8?

Question

У меня есть массив элементов, который выглядит так:

nav: any = [
  {
    name: 'Homepage',
    url: 'homepage'
    internal: false
  },
  {
    name: 'Section 1',
    hash: 'section-1'
    internal: true
  },
];

Теперь мне нужно вывести список a -элементов. Они должны либо содержать routerLink, если internal равно false , либо стать внутренним якорем. Я пробовал:

<a class="link"
   *ngFor="for item of nav"
   [href]="item.internal ? '#' + item.hash : null"
   [routerLink]="item.internal ? null : item.url">
  {{ item.title }}
</a>

Это правильно выводит homepage, но Section 1 получается неправильно:

<a class="link" href="/homepage">Homepage</a>
<a class="link" href="/">Section 1</a>

Вот что я на самом деле хочу:

<a class="link" href="/homepage">Homepage</a>
<a class="link" href="#section-1">Section 1</a>

Как этого добиться правильно?

Answer 1

Попробуйте это ...

<a class="link" *ngFor="for item of nav" [routerLink]="item.internal ? '#' + item.hash : item.url">
 {{ item.title }}
</a>

RouterLink заменяет href после рендеринга.

Answer 2

почему бы не условно, использовать одно или другое?

 <ng-container *ngIf="internal">
     show appropriate link
 </ng-container>

 <ng-container *ngIf="!internal">
     show appropriate link
 </ng-container>