时间戳

首页 > 解决方案 > 订阅 Angular Material Mat-Drawer 事件 .. 例如：openedChange

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

问题描述

我正在使用 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>

这是相关的组件类：

export class HomeLayoutComponent {
..etc

}

需要在 mat-drawer 和组件中添加什么代码以实现正确的绑定，该绑定将触发 Component 类中的“openedChange”事件

谢谢 ！

标签： javascriptangularangular-materialangular5angular6

解决方案

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

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

推荐阅读