订阅 Angular Material Mat-Drawer 事件 .. 例如：openChange

Question

我正在使用 mat-drawer 并且我想在关联的组件中收到通知，当打开和关闭 mat-drawer 以添加一些逻辑时；

html 具有以下结构：

<mat-drawer-container class="example-container"  autosize>
<mat-drawer #drawer class="custom-sidenav" mode="side">
    <div>
  <button routerLink="/" routerLinkActive="active"
   style="margin-top: 50px" mat-button class="small" (click)="showFiller = !showFiller" >
    <mat-icon style="color: red">home</mat-icon>
  <b style="margin-left: 20px">Home</b>
  </button>
</div>
  <div>
  <button routerLink="/transactions" routerLinkActive="active" style="margin-top: 20px" mat-button class="small" (click)="showFiller = !showFiller" >
    <mat-icon style="color:gray">trending_flat</mat-icon>
  <b matBadge="{{totalTransactions}}" matBadgeColor="red" matBadgeOverlap="false" style="margin-left: 20px">Transactions</b>
  </button>
</div>
  <div *ngIf="isAdmin">
        <button routerLink="/fetch-data" routerLinkActive="active" style="margin-top: 20px" mat-button class="small" (click)="showFiller = !showFiller" >
            <mat-icon  matBadge="{{totalCertificates}}" matBadgePosition="before" matBadgeColor="accent"  style="color:gray">description</mat-icon>
          <b style="margin-left: 20px">Certificates</b>
          </button>
  </div>
  <div>
        <button (click)="navigateToMyCertificates()"  routerLinkActive="active" style="margin-top: 20px" mat-button class="small" (click)="showFiller = !showFiller" >
            <mat-icon  matBadge="{{myCertificates}}" matBadgePosition="before" matBadgeColor="accent"  style="color:gray">description</mat-icon>
          <b style="margin-left: 20px">My Certificates</b>
          </button>
  </div>
  <div>
        <button routerLink="/certificate-validator" routerLinkActive="active" style="margin-top: 20px" mat-button class="small" (click)="showFiller = !showFiller" >
            <mat-icon  style="color:black">check</mat-icon>
          <b style="margin-left: 20px">Validate Certificate</b>
          </button>
  </div>
</mat-drawer>

这是关联的 Component 类：

export class HomeLayoutComponent {
..etc

}

需要在 mat-drawer 和组件中添加哪些代码才能实现正确绑定，从而触发 Component 类中的“openedChange”事件

谢谢 ！

Answer 1

有两种方法可以做到。你可以这样做

<mat-drawer #drawer (openedChange)="onOpenedChange($event)"></mat-drawer>

在您的组件中，您将拥有一个方法

onOpenedChange(e: boolean)

或者您可以使用组件中的视图子项来完成

export class MyComponent implements OnInit {
    @ViewChild('drawer') drawer: MatDrawer;
    ngOnInit() {
      this.drawer.openedChange.subscribe((o: boolean) => { console.log(`IsOpen: ${o}`) });
    }
}