Question

我在使用Angular 6材质应用程序访问子元素时遇到问题。我有一个标头组件，其中有两个子组件app-header和app-sidenav。 header.component.html具有以下代码：

<div style="height: 100vh">
  <app-tool-bar></app-tool-bar>
  <app-sidenav></app-sidenav>
</div>

在我的app-tool-bar中，我有这样的东西：

<button (click)="sidenav.toggle()">
  <mat-icon>menu</mat-icon>
</button>

该按钮应该用于切换app-side-nav组件中的sidenav菜单（向内和向外滑动）：

<mat-sidenav #sidenav>
    <mat-nav-list>
        ...
    </mat-nav-list>
</mat-sidenav>

我无法实现此功能。我相信这与我的header.component.ts文件和ViewChild装饰器有关。我这样做是这样的：

import { Component, ViewChild } from '@angular/core';
import { SidenavComponent } from './sidenav/sidenav.component';

...

@ViewChild(SidenavComponent) sidenav: SidenavComponent;

但是，这一直使我不确定。我希望有人可以引导我朝正确的方向进行修复。

谢谢。

Answer 1

您无法在oninit钩子或构造函数中访问viewchildren。它必须位于AfterViewInit挂钩中或更高版本中。它也只查询一次dom，因此，如果有任何显示或隐藏它的ngIf语句，则始终是不确定的。

使用Angular 6访问子元素并与之交互

1 个答案: