Добавить атрибут ссылки на шаблон к элементу, если он первый Angular

У меня есть мега-навигационное меню, созданное путем циклического прохождения ответа 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>

angular angular-template-variable
person Andrew Koper    schedule 16.10.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я не думаю, что вы можете добавить это динамически (вы также не можете сделать это с помощью директив), поэтому, боюсь, вам нужно будет создать 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>

Если есть способ, я уверен, что кто-нибудь меня поправит, но насколько я знаю, так и будет.

person Lars Vanderheydt    schedule 16.10.2020
comment
Отвечает ли это на ваш вопрос stackoverflow.com/questions/44440879/ ? - person Owen Kelvin; 17.10.2020
comment
Это то же самое поведение для NgModel. - person JWP; 17.10.2020
comment
@OwenKelvin, это своего рода ответ. ViewChildren может работать и может быть решением OP. Но это все еще не условная директива. В любом случае, спасибо за ссылку! - person Lars Vanderheydt; 17.10.2020

arrow_upward
0
arrow_downward

Вам нужно будет написать условие для достижения этого случая. Я предпочитаю использовать контейнер и шаблон, чтобы сделать код более читабельным. Вместо индекса вы можете проверить первый атрибут 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>
person Rashmi Kumari    schedule 17.10.2020