親コンポーネント内の子コンポーネントの要素への参照の取得

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

あなたは

で親から子コンポーネントを取得する必要があります

@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() { 
    } 

}