获取父组件中子组件元素的引用

Question

我想访问#sidenav父组件(toggleSidebar())中的子组件的元素().我尝试应用此解决方案但未成功:angular 2/typescript:获取模板中的元素

我的孩子成分:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  template: `
  <md-sidenav #sidenav mode="side" class="app-sidenav">
  Sidenav
  </md-sidenav>
  `,
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

我的父组件:

import { SidebarComponent } from './sidebar/sidebar.component';
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <app-sidebar></app-sidebar>
  <app-toolbar (toggleSidebar)="toggleSidebar()"></app-toolbar>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('sidenav') sidebar: SidebarComponent;

  constructor() { }

  toggleSidebar() {
    this.sidebar.toggle();
  }
}

Answer 1

您应该从父级获取子组件

@ViewChild(SidebarComponent, {static: false}) sidebar: SidebarComponent;

所以删除 sidenav

并将其添加到子组件以获取该元素.

@ViewChild(SidebarComponent) sidebar: SidebarComponent;

最后sidenav从父母调用您的子组件字段来做您想做的任何事情.

this.sidebar.sidenav// <-- selects child components element

父母:

@ViewChild('sidenav') sidenav;

儿童:

import { SidebarComponent } from './sidebar/sidebar.component';
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <app-sidebar></app-sidebar>
  <app-toolbar (toggleSidebar)="toggleSidebar()"></app-toolbar>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild(SidebarComponent) sidebar: SidebarComponent;

  constructor() { }

  toggleSidebar() {
    this.sidebar.sidenav.toggle();
  }
}