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

【问题标题】：Accessing and interacting with child elements with Angular 6使用 Angular 6 访问子元素并与之交互
【发布时间】：2019-05-05 23:42:15
【问题描述】：

我在使用 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;

但是，这一直给我不确定性。我希望有人能引导我朝着正确的方向解决这个问题。

谢谢。

【问题讨论】：

@ViewChild('#sidenav') sidenav: SidenavComponent;
它在哪里给你undefined？
它在header.component.ts 中给了我未定义，即使在上面应用了@SachilaRanawaka 的修复之后。
SidenavComponent exportAs sidenav，然后那么就可以直接使用sidenav了

标签： angular angular6 viewchild

【解决方案1】：

您不能在 oninit 钩子或构造函数中访问 viewchildren。它需要在 AfterViewInit 挂钩或更高版本中。它也只查询 dom 一次，所以如果有任何 ngIf 语句显示或隐藏它，这将始终是未定义的。

【讨论】：