Доступ и взаимодействие с дочерними элементами с Angular 6 - PullRequest
Новая
       23

Доступ и взаимодействие с дочерними элементами с Angular 6

0 голосов
/ 04 декабря 2018

У меня проблема с доступом к дочернему элементу в приложении материала 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>

Эта кнопка должна переключать меню sidenav (сдвиньте ви), который находится в компоненте app-side-nav: 

<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;

Однако, это продолжает давать мне неопределенное.Я надеюсь, что кто-то может направить меня в правильном направлении, чтобы исправить это.

Спасибо.

1 Ответ

0 голосов
/ 04 декабря 2018

вы не можете получить доступ к viewchildren в хуке oninit или в конструкторе.он должен быть в хуке AfterViewInit или позже.Он также запрашивает dom только один раз, поэтому, если какой-либо оператор ngIf показывает или скрывает его, он всегда будет неопределенным.

...