使用 ViewChild 访问 MatDrawer 在 Angular 8 中引发错误

Posted 2023-02-18

【中文标题】使用 ViewChild 访问 MatDrawer 在 Angular 8 中引发错误

【英文标题】：Access MatDrawer using ViewChild is throwing error in Angular 8

【发布时间】：2019-10-18 23:58:27

【问题描述】：

我正在尝试使用 Angular 版本 8 中的 MatDrawer 类型的属性通过组件文件设置 MatSideNav 的行为

TypeScript 代码：

// Declaration
@ViewChild('drawer',  static: false ) public drawer: MatDrawer;

// Toggle the Side Nav bar
showSideNav(): void 
    this.drawer.toggle();

html 代码：

<mat-drawer-container>
      <mat-drawer #drawer>
        <div>Side nav bar content</div>
      </mat-drawer>
      <div>Main content</div>
</mat-drawer-container>

控制台错误：

ERROR TypeError: "this.drawer is undefined"

请帮助我如何使用@ViewChild 访问MatDrawer 元素

【问题讨论】：

将 static 设置为 true，或在模板中添加 *ngIf（他们在文档中提到了这一点，但我不太记得了）

@FranciscoSantorelli - 是的，我试过了，它给出了同样的错误。

奇怪，它对我有用stackblitz.com/edit/angular-tyrccg?file=app/…

@yurzui - 我仍然遇到同样的错误，请稍等，我会检查并尝试在 StackBlitz 中重现相同的错误。

试试：@ViewChild(MatDrawer) public drawer: MatDrawer

【参考方案1】：

更改声明来自

@ViewChild('drawer',  static: false ) public drawer: MatDrawer;

到

@ViewChild('drawer',  static: true ) public drawer!: MatDrawer;