Как добавить CSS-класс в Angular parent при использовании router-outlet для child

Question

У меня есть такая структура

<!-- parent -->
<div>
  <!-- child gets injected by router -->
  <router-outlet></router-outlet>
</div>

Я хочу добавить класс в родительский div, если маршрутизатор создает определенный дочерний компонент.Я видел похожий вопрос с предположительно правильным ответом, но он не использует маршрутизатор, поэтому он не будет работать для меня.

Answer 1

Вы можете добавить Router в родительский компонент и использовать [ngClass].

constructor(public router: Router) { }

Затем в шаблоне:

<div class="container" [ngClass]="{'test' : router?.url === '/home'}">

  <router-outlet></router-outlet>
</div>

Это добавит класс с именемtest если роутер установлен на /home.

Вы можете увидеть его в действии здесь