Получить ссылочную переменную вне компонента в Angular 8

Question

У меня есть этот код для переключения ящика / боковой панели.

приложение-component.html

<app-header></app-header>
<mat-toolbar color="accent">
  <mat-toolbar-row>
    <button mat-button (click)="leftbar.toggle()" fxHide="false" fxHide.gt-sm>
      <mat-icon>menu</mat-icon>
    </button>
    <span>Custom Toolbar</span>
  </mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container class="ng-container centered">
  <mat-sidenav #leftbar opened mode="side">
    <app-leftnav></app-leftnav>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>

Если я нажимаю на значок меню, левая боковая панель переключается, открывается / закрывается. Там нет машинописи или дополнительных услуг. Работает из коробки. Тем не менее, мне нужно поместить мою панель инструментов mat в фактический компонент заголовка приложения. Поэтому вместо этого я делаю что-то вроде этого:

Приложение-component.html

<app-header></app-header>
<mat-sidenav-container class="ng-container centered">
  <mat-sidenav #leftbar opened mode="side">
    <app-leftnav></app-leftnav>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>

заголовок-component.html

<mat-toolbar color="accent">
  <mat-toolbar-row>
    <button mat-button (click)="leftbar.toggle()" fxHide="false" fxHide.gt-sm>
      <mat-icon>menu</mat-icon>
    </button>
    <span>Custom Toolbar</span>
  </mat-toolbar-row>
</mat-toolbar>

Это не работает, потому что #leftbar не известен компоненту заголовка, как ожидалось. Как мне это сделать? Я продолжаю видеть примеры, использующие что-то вроде этого:

@ViewChild('leftbar') sidebar: ElementRef;

Я продолжаю исследовать этот вопрос и получаю старые ответы из Angular 2, когда шаблон находился в файле компонента ts. Кроме того, как правило, компонент с выдвижным ящиком внутри (или любой другой функцией) находится внутри заголовка, а не наоборот. Нужно ли создавать для этого сервис? Если так, то как? Какой самый простой, правильный и наименьший объем машинописного способа сделать это в Angular 8?

Answer 1

Простейшим способом сделать это будет отправка события Output из компонента заголовка:

header.component.ts

export class HeaderComponent {
  @Output() menuButtonClicked = new EventEmitter();
  ...

заголовок.component.html

<button mat-button (click)="menuButtonClicked.emit()"

app.component.html

<app-header (menuButtonClicked)="leftbar.toggle()"></app-header>
<mat-sidenav-container class="ng-container centered">
  <mat-sidenav #leftbar opened mode="side">
    Side bar
  </mat-sidenav>
  ...
</mat-sidenav-container>

Пример Stackblitz