切换Material Sidenav时如何调用影响多个组件的方法？

【问题标题】：How to call a method that affects multiple components when Material Sidenav is toggled?切换Material Sidenav时如何调用影响多个组件的方法？
【发布时间】：2019-10-04 02:45:58
【问题描述】：

我的 app.component 中有一个 Angular Material Sidenav 组件。

问题在于，当切换菜单时，它会影响我在应用程序中拥有的多个图表上父组件的大小。因此，每次切换 sidenav 以适应其父组件的大小时，都需要重新渲染图表。

要在整个应用程序中重新渲染图表，我需要在一个 html 元素上调用 render() 方法，我可以通过每个图表组件打字稿文件上的 @ViewChild() 获取该方法。

我不知道是否可以通过 app.component.ts 获取图表组件或其父“仪表板组件”的实例，因为这些组件嵌套在“文件树”的多个步骤中。也许我可以使用服务？

如果有人能在正确的方向上指导我如何做到这一点，我将非常高兴。

提前感谢

【问题讨论】：

使用此处描述的事件服务：angular.io/guide/…

标签： angular angular-material

【解决方案1】：

您可以简单地使用响应式图表（响应式 CSS）来避免重新渲染。如果图表中没有数据发生变化，那么重新渲染它们不是一个好主意。

但是，如果您仍想在切换 sidenav 时重新渲染它们，您可以使用 rxjs BehaviorSubject 并在切换 sidenav 时广播该值。您的图表将订阅该广播事件并在切换时重新呈现。例如在 UtilityService 中：

let bSubject = new BehaviorSubject("hideSidebar");

在 AppComponent 中：

toggleSidenav(){
    this.utilityService.bSubject.next("showsidebar");
}

在您的图表组件中：

onInit(){
    this.utilityService.bSubject.subscribe(value => {
      console.log("Subscription recieved--update charts", value); 
    });
}

【讨论】：