Angular 基于导航更改标题背景

我的项目结构如下：

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>

所以，我在所有页面中加载头组件

然后，例如，在airports部分，我加载airport模板组件，并使用@Input将内容文本和其他存储在airport-1组件中的内容放入其中

同样，我需要根据airport-1、airport-2导航更改标题背景，但我仍然无法确定

我再次尝试@Input，但没有成功。 我还尝试在airport-1.component.scss中的同一头类上应用不同的样式，但没有成功，我认为这是由于视图封装

有办法解决我的问题吗

---

如有任何建议，我们将不胜感激。

在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

---

关于

有一些方法可以做到这一点： 1：将样式放置在父项中，并在子项选择器前面加上/ng deep/这样样式就不会“嵌入”到父项中，并且会影响子项。 2：订阅router.events.subscribeevent=>analyzerouter.url和路由器的句柄url 3：我最喜欢的Witch将在父组件中保留逻辑，但在header.scss中保留样式

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

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

---

在标头组件中，检查不同机场路线的this.router.url。如果要在标头中使用机场组件SCS，则必须禁用封装->封装：视图封装。无