Angular 如果是当前路由器，则将类添加到标头

我正在学习Angluar 8，我所需要做的就是，如果/功能路由器处于活动状态，它将在标题中添加一个名为“white”的类名 要分配活动路由，我将使用功能（cap）组件来分配路由是否处于活动状态 在cap组件中，我将从AppServiceService调用一个函数AppServiceService中的此函数将调用将布尔变量更改为true以添加类console.log语句工作正常，但不会添加类：(

这是标题组件

<header class="main_header" [ngClass]="{'active': isWhite}">
<div class="container">
    <div class="row">
        <div class="col_lg_3">
            <a routerLink=""><img src="https://redhornstaging.wpengine.com/wp-content/uploads/2020/03/logo.svg"></a>
        </div>
        <div class="col_lg_9">
            <ul class="navbar_list">
                <li><a routerLink="">Home</a></li>
                <li><a routerLink="/capabilities">Capabilities</a></li>
                <li><a routerLink="/works">Works</a></li>
                <li><a class="nav_item_btn" routerLink="/contact">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
</header>

    export class CapComponent implements OnInit {

  constructor(private router:Router , private app:AppServiceService ) { }
  //check if the current route is capabilities it will call function from the service
  is_Active(){
    if(this.router.url == '/capabilities'){
      this.app.applyHeader();
      // console.log(this.router.url);
    }
  }
  ngOnInit(): void {
    this.is_Active();
  }

}

这是AppServiceService

导出类AppServiceService{

constructor(public nav:NavbarComponent) { }
// nav = new NavbarComponent; 
 applyHeader(){
   this.nav.isWhite = true;
   console.log("Hello from service");
 }

}

最后一个有问题的组件，但是当我改变从同一个组件调用函数的方式时，它工作得很好

export class NavbarComponent implements OnInit {

  isWhite : boolean = false ;

  constructor() { }
  makeItWhite(){
    this.isWhite = true ;
    if(this.isWhite){
      console.log('white !');
    }
  }
  ngOnInit(): void {
  }

}

您正试图从单例服务访问和设置组件的属性。这是一种不好的做法。从一开始，您可能只是从typescript中的另一个类访问一个类的属性。但在Angular中，单例服务的用途不同。请参阅。简言之，单例用于提供公共服务功能在不同组件的控制器之间设置通用属性

您可以订阅

router

的

events

observable，以对照

AppServiceService

中的当前路由进行检查

应用服务

从'@angular/Router'导入{NavigationEnd，Router}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
导出类AppServiceService{
private isCapabilitiesSource=新行为主体（false）；
public isCapabilities$=this.isCapabilitiesSource.asObservable（）；
构造函数（）{
此.u router.events.filter（e=>e instanceof NavigationEnd）.subscribe(
事件=>{
如果（事件['urlAfterRedirects']=='capabilities'）{
this.isCapabilitiesSource.next（true）；
}否则{
this.isCapabilitiesSource.next（false）；
}
}
);
}
}

标题组件

导出类HeaderComponent实现OnInit{
构造函数（私有的_appService:AppServiceService）{}
恩戈尼尼特（）{
}
}

标题组件模板

<header class="main_header" [ngClass]="{'active': (_appService.isCapabilities$ | async)}">

基本上你想突出显示活动路由吗？不，如果此路由是活动的，我需要添加类为什么不在header组件中执行所有这些操作？