我如何从角度组件调用 HTML 标记函数

Question

我需要从角度组件调用我的 HTML 标签drawer.toggle()函数。 因为事件来自其他一些兄弟组件。 这是 HTML 代码：

<mat-drawer-container class="example-container">
    <mat-drawer #drawer>
      <p>Lorem ipsum dolor sit.</p>
    </mat-drawer>
    <div class="example-sidenav-content">
      <button type="button" mat-button (click)="drawer.toggle()">
        Toggle sidenav
      </button>
    </div>
</mat-drawer-container>

这是我的角度分量函数。 请不要在这里，其他角度兄弟组件正在使用EventEmitter调用函数，我需要切换此侧导航栏。

toggleSideNav($event){
  //need to call that HTML drawer.toggle() from here
}

感谢帮助。 稍后我将从 HTML 中删除该button 。

Answer 1

传递 ref（抽屉），作为打字稿中函数的参数，并从组件函数切换。

HTML

<button type="button" mat-button (click)="toggleSideNav(drawer)">

成分

toggleSideNav(drawer) {
   drawer.toggle()
}

这是stackblitz的例子

https://stackblitz.com/edit/angular-8n9iqt

Answer 2

更新

如果您的角度版本 > 9

static默认为false ；

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

@ViewChild('drawer', {static: true}) drawer: MatDrawer;

toggleSideNav($event){
  // need to call that HTML 
  this.drawer.toggle() from here
}

如果您的角度版本是 8

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

@ViewChild('drawer', {static: true}) drawer: MatDrawer;

toggleSideNav($event){
  // need to call that HTML 
  this.drawer.toggle() from here
}

如果您的角度版本 < 8

@ViewChild('drawer') drawer: MatDrawer;