Angular 4 получить [routerLink] ViewChildren

Я пытаюсь получить список всех ссылок в моем текущем компоненте с шаблоном, который ищет что-то вроде этого:

<div *ngFor="let link of links">
  <a [routerLink]="[link.url]">{{ link.label }}</a>
</div>

Я пробовал настроить @ViewChildren(RouterLink) links: QueryList<RouterLink>;. Однако этот список всегда был пуст.

Быстрый эксперимент с @ViewChild(RouterLink) elem: RouterLink;:

<div [routerLink]="[]">Bla</div>

возвращает значение, а

<a [routerLink]="[]">Bla</a>

не.

Я проверил документацию: https://angular.io/api/router/RouterLink, где селектор фактически задан как :not(a)[routerLink], так что эксперимент имеет смысл.

Теперь возникает вопрос: как мне получить список [routerLink], которые являются атрибутом элемента <a>? Я не нашел ни AComponent, ни чего-то подозрительного.

Возможной альтернативой может быть добавление идентификатора ко всем элементам <a #myLink [routerLink]="[]">, но это кажется немного странным, поскольку у меня уже есть критерий идентификации, который я хотел бы использовать.

Как мне найти свой список [routerLink]?


angular viewchild routerlink
person Cabadath    schedule 05.07.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я искал то же самое, когда увидел RouterLinkWithHref. У меня не было времени попробовать, но я полагаю, это может вам помочь.

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

[РЕДАКТИРОВАТЬ]

Я пробовал, и действительно, оба (с a и без него) работают.

Это все предположение, но они могли создать RouterLinkWithHref для взаимодействия с существующим механизмом привязки (полезно для SEO).

Тогда создание директивы без тегов привязки кажется логичным (перекрытие селектора компонентов и селектора директив не кажется правильным).

Во всяком случае, я не нашел никакого решения, чтобы получить RouterLink и RouterLinkWithHref в одном ViewChildren.

person Alexandre SIRKO    schedule 17.09.2018
comment
Я только что попробовал, странно, что мы не можем выбрать с помощью routerLink, когда он находится на ‹a›, но с селектором RouterLinkWithHref он работает: @ViewChildren (RouterLinkWithHref) elem: QueryList ‹RouterLinkWithHref›; и держите html, как будто это работает;) - person xrobert35; 17.09.2018