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

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>

这是关联的组件 class :

export class HomeLayoutComponent {
..etc

}

需要在 mat-drawer 和组件中添加什么代码才能实现正确的绑定，从而触发组件中的 "openedChange" 事件 class

谢谢！

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}`) });
    }
}

Answer 2

你可以去the official website of angular material。他们有一个非常好的文档。

以上回答很完美。只是添加更多信息。

还有许多其他事件，例如：openedStart、closedStart、onPositionChanged ...等

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

Subscribe to Angular Material Mat-Drawer events .. Ex: openedChange

javascript

angular-material

angular

angular5

angular6