изменить фон заголовка на основе навигации

Question

Структура моего проекта следующая:

app
-----pages-parts |
                 |header
                 |footer

-----pages       |
                 |homepage
                 |contacts
                 |...etc...

-----airports    |
                 |airport-template
                 |airport-1
                 |airport-2
                 |...etc...

В моем app.component.html у меня есть:

<app-header></app-header>
<router-outlet></router-outlet> //<- here I load homepage for first instance
<app-footer></app-footer>

Итак, я загружаю компонент заголовка на всех страницах.

Затем, например, в разделе аэропортов я загружаю компонент шаблона аэропорта и помещаю содержимое (тексты и другие материалы), хранящиеся в компоненте аэропорта-1, используя @ Input.

В том же самомКстати, мне нужно изменить фон header, основываясь на навигации аэропорта-1, аэропорта-2, но я до сих пор не могу понять это.

Я снова попробовал @Input, но безуспешно. Я также попытался применить разные стили к одному и тому же классу заголовка в airport-1.component.scss, но безуспешно (думаю, это связано с View Encapsulation).

Есть ли способ решить мою проблему?

Любые предложения будут оценены.

Answer 1

В компоненте заголовка внутри метода ngOnInit вы должны подписаться на изменение каждого маршрута.

import { NavigationEnd, Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
…
subscriptionRoute: Subscription;
classBackground: string = '';
…
constructor(
  private router: Router
) {}
ngOnInit() {
  this.subscriptionRoute = this.router.events.subscribe((event) => {
    if (event instanceof NavigationEnd) {
      console.log(event.url);
      //here set classBackground property
    }
  });
}

В html заголовка используйте ngClass для присвоения classBackground

Regards

Answer 2

Есть несколько способов сделать это: 1: поместить стили внутри родительского элемента и добавить к дочернему селектору /ng-deep/, таким образом, стили не будут «инкапсулированы» в родительский и влияют на дочерний. 2: подписаться на router.events.subscribe(event => analyze(router.url)) и обработать URL маршрутизатора. 3: Ведьма, которая мне больше всего нравится, оставит логику в родительском компоненте, а стили в header.scss

<app-header [ngClass]="{'blue-background': shouldBeBlue}"/>

<!-- header.scss -->
:host.blue-background {
  .some-element {
    background: blue;  
  }
}

.