從 mat-sidenav-container 外部的按鈕打開 mat-sidenav

Question

我嘗試對 Angular Material 團隊在此示例中所做的移動使用做同樣的事情。

所以我創建了我的組件，如下所示：

<app-component-0></app-component-0>
<div class="d-lg-none">
    <button mat-icon-button (click)="snav.toggle()">
         <mat-icon>menu</mat-icon>
    </button>
    <mat-sidenav-container class="sidenav-container">
        <mat-sidenav #snav mode="over">
           <app-menu-tree>
           </app-menu-tree>
        </mat-sidenav>
        <mat-sidenav-content>
           <router-outlet></router-outlet>
        </mat-sidenav-content>
   </mat-sidenav-container>
</div>
<app-component-1-desktop class="d-none d-lg-flex flex-column"></app-component-1-desktop>

所以調用 sidenav 切換操作的按鈕在 mat-sidenav-container 之外，就像在 stackblitz 上的例子一樣......但是當我點擊按鈕時出現以下錯誤：

無法讀取未定義的屬性“切換”

所以按鈕無法打開sidenav ...

有沒有人有解決這個問題的想法？

（對不起，我的英語不是我的母語）

Answer 1

使用opened輸入。 API： https : //material.angular.io/components/sidenav/api

模板：

<button mat-icon-button (click)="opened = !opened">
  <mat-icon>menu</mat-icon>
</button>
<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="over" [(opened)]="opened">
    <app-menu-tree></app-menu-tree>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

記得在你的組件中定義opened屬性。