如果第一個 Angular，則將模板引用變量屬性添加到元素

Question

我有一個大型導航菜單，它是通過循環來自服務器的 JSON 響應制成的。 我想將#first 模板引用變量添加到第一個 a 標簽。 （這樣我就可以從它的父組件訪問它，如果用戶使用鍵盤選擇大型導航的那部分，我可以將焦點添加到該鏈接；使其可訪問。）下面不起作用。 你怎么做到這一點？

  <li *ngFor="let item of subMenu.items; let itemIndex=index;">
    <a (click)="linkMegaClicked($event)"
      [routerLink]="item.url"
      [#first]="itemIndex == 0"
      [innerHtml]="item.link_text">
    </a>
  </li>

Answer 1

我不認為你可以動態添加它（你也不能用指令來做到這一點）所以恐怕你需要創建 2 個 html 標簽。

<li *ngFor="let item of subMenu.items; let i = index;">
  <a
    #first
    *ngIf="i === 0"
    [routerLink]="item.url"
    [innerHtml]="item.link_text"
    (click)="linkMegaClicked($event)">
  </a>

  <a
    *ngIf="i !== 0"
    [routerLink]="item.url"
    [innerHtml]="item.link_text"
    (click)="linkMegaClicked($event)">
  </a>
</li>

如果有辦法，我相信有人會糾正我，但據我所知，這將是正確的方式。

Answer 2

您將需要編寫條件來實現這種情況。 我更喜歡使用容器和模板來使代碼更具可讀性。 您可以檢查 ngFor 的第一個屬性而不是索引。

<li *ngFor="let item of subMenu.items; first as isFirst">
  <ng-container *ngIf="isFirst; else otherItem">
    <a #first
       [routerLink]="item.url"
       [innerHtml]="item.link_text"
       (click)="linkMegaClicked($event)">
    </a>
  </ng-container>
  <ng-template #otherItem>
    <a *ngIf="i !== 0"
       [routerLink]="item.url"
       [innerHtml]="item.link_text"
       (click)="linkMegaClicked($event)">
    </a>
  </ng-template>
</li>