routerLinkActive на родительском элементе не работает, когда routerLink находится не непосредственно внутри родительского элемента, а в отдельном компоненте

Я хочу установить класс в div, когда активен один из маршрутов внутри этого div. Это отлично работает с директивой routerLinkActive, когда я помещаю ссылки с директивой routerLink непосредственно внутри div:

<div class="menu" routerLinkActive="active-group">
  <a ngFor="let link of links" [routerLink]="link">{{ link }}</a>
</div>

Однако, когда я реорганизую ссылки на отдельный компонент, класс active-group больше не устанавливается:

<div class="menu" routerLinkActive="active-group">
  <app-link *ngFor="let link of links" [link]="link"></app-link>
</div>

Я создал StackBlitz, чтобы продемонстрировать проблему здесь: https://stackblitz.com/edit/routerlinkactive?file=src/app/app.component.ts

Любая помощь будет оценена по достоинству!


angular router routerlinkactive
person Waterstraal    schedule 04.06.2021    source источник
comment
Я не совсем понимаю проблему. Что именно ты хочешь делать?   -  person Anonim    schedule 04.06.2021
comment
Я хочу установить класс в div меню, когда один из маршрутов под ним активен   -  person Waterstraal    schedule 04.06.2021

Ответы (1)


arrow_upward
-1
arrow_downward

Попробуй это:

  <app-link
    *ngFor="let link of links"
    [link]="link"
    [routerLink]="link"
    routerLinkActive="active"
  ></app-link>
person Naeem_VE    schedule 04.06.2021
comment
Спасибо, но я специально не хочу помещать директиву routerlink в такой компонент, потому что это лишает многих целей извлекать его в отдельный компонент. Также; это простой пример, но на самом деле он более сложный и, например, также использует routerLinkActiveOptions - person Waterstraal; 04.06.2021