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

Question

我想在父组件 (toggleSidebar()) 中访问子组件的元素 (#sidenav)。我尝试应用此解决方案但没有成功：angular 2 / typescript: get hold of an element in the template

我的孩子组件：

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

Angular 8 更新：

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

更多信息请查看：https://angular.io/guide/static-query-migration

---

您应该使用

从父组件获取子组件

@ViewChild(SidebarComponent) sidebar: SidebarComponent;

所以删除sidenav

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

@ViewChild('sidenav') sidenav;

最后从父级调用你的子组件sidenav 字段来做你想做的任何事情。

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

父母：

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();
  }
}

孩子：

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 {
  @ViewChild('sidenav') sidenav;
  constructor() { }

  ngOnInit() {
  }

}