Угловой 2 - доступ к дочернему компоненту, созданному на маршрутизаторе-выходе

Question

Обычно я могу легко получить доступ к свойству дочернего компонента из родительского компонента с помощью @ViewChild.

App.component.ts (родительский компонент)

import { Component, ViewChild, AfterViewInit } from '@angular/core'; 
import { ChildComponent } from './child.component'; 
@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular App</h1> <child-app></child-app>' 
}) 
export class AppComponent implements AfterViewInit { 
    @ViewChild(ChildComponent) childComponent: ChildComponent 

    ngAfterViewInit() { 
     console.log("This is app component "); 
     console.log(this.childComponent.name); 
    } 
} 

child.component.ts

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

@Component({ 
    selector: 'child-app', 
    template: '<h2>This is my child</h2>' 
}) 
export class ChildComponent { 
    // some attribute 
    name: any = "Kid"; 

    callChild(): void{ 
     console.log("Hello, I am your son"); 
    } 
} 

Это легко, если директива ребенка компонент вложен непосредственно внутри родительского элемента , Тем не менее, в родительском компоненте, если я генерирую дочерний элемент динамически, настроив route и используя <router-outlet></router-outlet>, я получил результат как неопределенный.

Вы знаете, как добиться этого?

Answer 1

Если ваша цель - просто получить доступ к значению/методу от вашего ребенка, вы можете просто использовать статическое ключевое слово. см. ниже приведенные ниже изменения к вашему коду.

import { Component, ViewChild, AfterViewInit } from '@angular/core'; 
    import { ChildComponent } from './child.component'; 
    @Component({ 
     selector: 'my-app', 
     template: '<h1>My First Angular App</h1> <child-app></child-app>' 
    }) 
    export class AppComponent implements AfterViewInit { 
     @ViewChild(ChildComponent) childComponent: ChildComponent 

     ngAfterViewInit() { 
      ChildComponent.callChild("PArent"); 
     } 
    } 


    child.component.ts 

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

    @Component({ 
     selector: 'child-app', 
     template: '<h2>This is my child</h2>' 
    }) 
    export class ChildComponent { 
     // some attribute 
     name: any = "Kid"; 

     static callChild(txt:string): void{ 
      console.log("Inside child - Hello, from: " + txt); 
     } 
    }