Блог

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

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

#angular #router #routerlinkactive

Вопрос:

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

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

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

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

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

Любая помощь будет признательна!

Комментарии:

1. Я не до конца понимаю проблему. Что именно ты хочешь сделать?

2. Я хочу установить класс в меню div, когда один из маршрутов под ним активен

Ответ №1:

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

   <app-link
    *ngFor="let link of links"
    [link]="link"
    [routerLink]="link"
    routerLinkActive="active"
  ></app-link>

Комментарии:

1. Спасибо, но я специально не хочу помещать директиву routerlink в компонент подобным образом, потому что это во многом противоречит цели извлечения его в отдельный компонент. Также; это простой пример, но на самом деле он более сложный и, например, также использует функции routerLinkActiveOptions

Метки: , ,