使用 ViewChild 访问 MatDrawer 在 Angular 8 中抛出错误

Question

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

打字稿代码：

// Declaration
@ViewChild('drawer', { static: false }) public drawer: MatDrawer;
// Toggle the Side Nav bar
showSideNav(): void {
this.drawer.toggle();
}

网页代码：

<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元素

Answer 1

更改声明自

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

自

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

Answer 2

就我而言，问题是因为我没有在我的 Angular 模块中导入 MatSidenavModule。我仍然可以正确引用 MatDrawer，因为我安装了材料，但它不在模块导入列表中。

Answer 3

我能够通过使用装饰器在子组件中传递 mat-drawer/sidenav id 来解决类似的问题@Input因此在 OP 的问题陈述的情况下，这样的事情可能会起作用。

// Declaration
@Input drawerHandler: MatDrawer;
// Toggle the Side Nav bar
showSideNav(): void {
this.drawerHandler.toggle();
}

在模板中，使用属性绑定传递此输入 id 值

<mat-drawer-container>
<mat-drawer #drawer [drawerHandler]="drawer">
<div>Side nav bar content</div>
</mat-drawer>
<div>Main content</div>
</mat-drawer-container>