Блог

Обычно я могу легко получить доступ к свойству дочернего компонента из родительского компонента с помощью @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> , я получил результат как неопределенный.

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

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

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