Как передать информацию от одного компонента к вложенным дочерним компонентам в Angular 2+?

Question

У меня есть компонент xyz-comp, который используется внутри master-comp. И есть еще один компонент abc-comp, который используется внутри xyz-comp как часть его ng-content.

Мастер-Комп:

<xyz-comp (outX)="draw($event)">
    <abc-comp class="breaker" [data]="incomingLabel">
    </abc-comp>
</xyz-comp>

xyz-comp:

<div class="searcher">
    <ng-content></ng-content>
</div>

xyz-comp .ts:

import { Component, Output, EventEmitter, ElementRef } from "@angular/core";

@Component({
    selector: "xyz-comp",
    templateUrl: "./xyz.html"
})
export class Xyz {

    @Output() outX = new EventEmitter(false);

    label: string;

    constructor(private _ref: ElementRef) {
        this._getlabel();
    }

    private _getlabel() {
        this.label = someFunc();
        this.outX.emit(this.label);
    }
}

Master-comp.ts:

import { Component, Output, EventEmitter, ElementRef } from "@angular/core";

@Component({
    selector: "master-comp",
    templateUrl: "./master.html"
})
export class Master {

    incomingLabel: string;

    constructor(private _ref: ElementRef) {

    }

    draw(evt: string) { // This function is not getting called.
        console.log(evt); 
        this.incomingLabel = evt;
    }
}

Внутри Master-comp.ts метод draw(), который должен быть запущен, как только будет выдано событие вывода outX. Но метод draw() не вызывается.

Кроме того, я хотел бы использовать это значение incomingLabel в ab c -comp следующим образом:

ab c -comp.ts:

import { Component, Input, EventEmitter, ElementRef } from "@angular/core";

@Component({
    selector: "abc-comp",
    templateUrl: "./abc.html"
})
export class Abc {

    @Input() data: string;

    constructor(private _ref: ElementRef) {

    }

}

ab c -comp:

<div class="draw-container">
   <span [attr.id]="data"></span>
 </div>

Я что-то здесь упускаю? Любая помощь приветствуется.

Answer 1

Звоните this._getlabel(); в ngOnInit() или ngAfterViewInit(). Конструктор вызывается еще до ngOnInit. Ни компонент не создан, ни представление не были созданы к тому времени, поэтому, хотя метод в конструкторе будет вызван, emit не будет иметь никакого эффекта