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

Question

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

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

要在整个应用程序中重新呈现图表，我需要在html元素上调用render（）方法，该元素可以通过每个Chart-Components打字稿文件上的@ViewChild（）获得。

我不知道是否有可能通过app.component.ts获得图表组件或其父“仪表板组件”的实例，因为这些组件嵌套在“文件树”的下方。也许我可以使用一项服务？

如果有人能为我提供正确的方向指导，我将感到非常高兴。

非常感谢

Answer 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); 
    });
}