如何在角度4中单击按钮单击事件管理2 sidenav

Question

<button mat-icon-button><mat-icon (click)="drawer.toggle();">menu</mat-icon></button>

正如您可以看到使用click函数调用的drawer.toggle（）函数。但我的要求是致电

第一次单击时出现drawer.toggle（）

和

第二次点击是调用drawer2.toggle（）

我没有得到如何做到这一点。

Answer 1

使用ViewChild并获取抽屉的参考。

在您的模板中：

<button mat-icon-button (click)="handleClick();><mat-icon>menu</mat-icon></button>
<my-drawer-one #myDrawerOne></my-drawer-one>
<my-drawer-two #myDrawertwo></my-drawer-two>

在您的组件中：

import { ViewChild, ... } from '@angular/core';

...
@ViewChild('myDrawerOne') drawer;
@ViewChild('myDrawerTwo') drawer2;

private clickCount: number = 0;

public handleClick(): void {
   this.clickCount++;
   if(this.clickCount === 1) {
      this.drawer.toggle();
      return;
   }

    this.clickCount = 0; // reset clickCount if necessary
    this.drawer2.toggle();
}

简化你可以这样做。