angular - Angular 8 でコンポーネント外の参照変数を取得する

Question

引き出し/マットサイドバーを切り替えるために、このコードがあります。

app-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-toolbar を実際の app-header コンポーネントに配置する必要があります。代わりに、次のようなことを行います。

app-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>

header-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;

私はこの質問を調査し続け、テンプレートが ts コンポーネント ファイルにあったときに Angular 2 から古い回答を得ています。また、一般的に、ドロワーを含むコンポーネント (またはその他の機能) はヘッダー内にあり、その逆ではありません。このためのサービスを作成する必要はありますか? もしそうなら、どのように？Angular 8 でこれを行うための最も簡単で、正確で、最小限の typescript の方法は何ですか?