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

【问题标题】：How I call HTML tag function from angular component我如何从角度组件调用 HTML 标记函数
【发布时间】：2020-06-30 01:49:45
【问题描述】：

我需要从 Angular 组件中调用我的 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。

【问题讨论】：

标签： angular

【解决方案1】：

更新

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

如果您的角度版本为

@ViewChild('drawer') drawer: MatDrawer;

【讨论】：

为什么要让静态为真？我看不出有什么好的理由，这是已弃用的值。
@IngoBürk 在 Angular 8 静态选项中是必需的
当父元素或当前元素有*ngIf指令时，需要设置static: false
@AshotAleqsanyan，谢谢..@ViewChild 在我使用 angular8 时工作。
"static" 是必需的，但更好的值是 true 并且应该尽可能设置为 true。这就是我的观点。

【解决方案2】：

将 ref（抽屉）作为参数传递给 typescript 中的函数并从组件函数切换。

HTML

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

组件

toggleSideNav(drawer) {
   drawer.toggle()
}

这里是 stackblitz 示例

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

【讨论】：

不，它不起作用.. 现在代码正在使用 @ViewChild 作为解决方案。
您是否尝试过我提到的方法，或者您使用过event的方法？
@mahipalsingh 请看示例