부모 구성 요소의 하위 구성 요소 요소에 대한 참조 얻기

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

}