Межкомпонентная связь в угловых

Question

У меня есть три компонента в моем приложении.Первый компонент header, второй компонент sideNavBar и третий компонент overview.я показываю, что с 1,2,3 на рисунке ниже.

когда я выбираю любую социальную платформу, я отправляю пользователя на home/overview и я хочу, чтобы в моем sideNavBar изменилось значение цвета соответствующей иконки.

метод, который я использую, когда пользователь нажимает на каждое социальное сообщение в заголовке:

onActiveSocial(social) {
    localStorage.setItem('activeAccountMedium', social);
    this.appGlobal.activeSocial = social;
    this.router.navigate(['home/overview']);
  }

я знаю, что яв этом методе нужно написать триггер, чтобы значок в sideNavBar изменил цвет.

я должен сказать, что эти 3 компонента не связаны друг с другом.

как я могу это сделать?

Answer 1

Решение 1: (если цвет, который вы хотите применить к sidenav, не имеет ничего общего с активным маршрутом) Услуги предназначены для того же самого, (Внедрение зависимостей)

export class SomeService {
private color: BehaviorSubject<string> = new BehaviorSubject<string>('Green');
get _color() {
  return this.color.asObservable();
}
constructor() {}

public updateColor(val) {
 this.color.next(val);
 }
}

Предоставьте эту услугу в родительскоммодуль или корневой модуль компонентов (app.module.ts)

внедрить службу в компоненты

    overview.component.ts
    constructor(private someService: SomeService) {

    }
    // update the variable here on some method
    this.someService.updateColor('red');

    sidenav.component.ts
    color: string;
    constructor(private someService: SomeService) {}
    ngOnInIt() {
      this.someService._color.subscribe((val) => {
         this.color= val;
      });
    }
   ngOnDestroy() {
   //unsubscribe on destroye
  }

Если честно, ее чрезмерное уничтожение для такой проблемы просто используйте routerLinkActive, это будет проще

2.Решение 2: Вы можете использовать свойство routerLinkActive, предоставленное angular, для применения класса, когда маршрут активен, см. https://angular.io/api/router/RouterLinkActive для получения дополнительной информации