Как вызвать метод, который влияет на несколько компонентов при переключении Material Sidenav?

Question

У меня есть компонент Sidenav Angular Material внутри моего app.component.

Проблема в том, что когда меню переключается, оно влияет на размер родительского компонента на нескольких графиках, которые есть вприложение.Поэтому диаграммы необходимо перерисовывать каждый раз, когда sidenav переключается в соответствии с размером их родительских компонентов.

Чтобы перерисовать диаграммы во всем приложении, мне нужно вызвать метод render ()для html-элемента, который я могу получить с помощью @ViewChild () в каждом файле машинописи компонентов диаграммы.

Я не знаю, возможно ли получить экземпляр панели компонентов диаграммы или их родительской панели-component "через 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); 
    });
}