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中的图标更改颜色。

我必须说这三个组成部分彼此无关。

我该怎么做？

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：当路由处于活动状态时，可以使用angular提供的routerLinkActive属性来应用类。 https://angular.io/api/router/RouterLinkActive 更多

跨角度的跨组件通信

1 个答案: