добавить класс в заголовок, если текущий маршрутизатор

Question

Я изучаю Angluar 8, и все, что мне нужно сделать, - если маршрутизаторы /abilities активны, то он добавит имя класса «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>

это компонент cap

    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

export class 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 {
  }

}

Answer 1

1. Вы пытаетесь получить доступ к свойству компонента и установить его из одноэлементной службы. Это плохая практика. С самого начала может показаться, что вы просто получаете доступ к свойству класса из другого класса в машинописи. Но в Angular синглтон-сервисы служат другой цели. Пожалуйста, смотрите здесь . Короче говоря, синглтоны используются для обеспечения общих свойств общих функций между контроллерами различных компонентов.

2. Вы можете подписаться на events observable из router, чтобы проверить текущий маршрут в AppServiceService. Попробуйте следующее

AppServiceService

import { NavigationEnd, Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

export class AppServiceService {
  private isCapabilitiesSource = new BehaviorSubject<boolean>(false);
  public isCapabilities$ = this.isCapabilitiesSource.asObservable();

  constructor() {
    this._router.events.filter(e => e instanceof NavigationEnd).subscribe(
      event => {
        if (event['urlAfterRedirects'] === 'capabilities') {
          this.isCapabilitiesSource.next(true);
        } else {
          this.isCapabilitiesSource.next(false);
        }
      }
    );
  }
}

Компонент заголовка

export class HeaderComponent implements OnInit {
  constructor(private _appService: AppServiceService) { }

  ngOnInit() {
  }
}

Шаблон компонента заголовка

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