angular - 角度的跨组件通信

问题描述

我的应用程序中有三个组件。第一个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 个组件彼此无关。

我怎样才能做到这一点？

标签： angularcomponents

解决方案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
  }

老实说，对于这样的问题，它的 overKilling 只需使用 routerLinkActive 它会更容易

2.解决方案2：您可以使用angular提供的routerLinkActive属性在路由处于活动状态时应用一个类，更多信息请参考https://angular.io/api/router/RouterLinkActive

angular - 角度的跨组件通信

问题描述

解决方案

推荐阅读