Angular 2 - Zugriff auf untergeordnete Komponenteneigenschaft, die von Router-outlet generiert wird

Question

Normalerweise kann ich mit @ViewChild einfach auf die untergeordnete Komponenteneigenschaft von der übergeordneten Komponente zugreifen.

App.component.ts (Stammkomponente)

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

Es ist einfach, wenn das Kind Komponente Richtlinie direkt in der übergeordneten Komponente verschachtelt . Wenn ich das Kind in der Elternkomponente jedoch dynamisch durch Konfigurieren von route und <router-outlet></router-outlet> erzeuge, habe ich das Ergebnis als undefiniert erhalten.

Wissen Sie, wie Sie dies erreichen können?

Answer 1

Wenn es Ihr Ziel ist, einfach auf einen Wert/eine Methode von Ihrem Kind zuzugreifen, können Sie einfach das Schlüsselwort static verwenden. Siehe folgende Änderungen zu Ihrem Code

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