angular - 如果第一个 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>