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

如果您的角度版本为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;

我如何从角度组件调用HTML标签功能

2 个答案: