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

时间:2017-01-10 18:50:35

标签: angular components

我想访问父组件(#sidenav)中的子组件元素(toggleSidebar())。我尝试应用此解决方案但未成功: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();
  }
}

1 个答案:

答案 0 :(得分:8)

您应该使用

从父级获取子组件
$0.baseAddress

删除public class Stacki { public static void main(String[]) { LinkedListStack stack = new LinkedListStack(); System.out.println("size is: " + stack.size());

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

   System.out.println("size is: " + stack.size());

最后从父母那里调用您的子组件@ViewChild(SidebarComponent) sidebar: SidebarComponent; 字段来做您想做的任何事情。

sidenav

<强>父

@ViewChild('sidenav') sidenav;

儿童:

sidenav