Что я пытаюсь сделать:
- Динамическое создание компонентов (сделано)
- Разрешить динамически создаваемым компонентам использовать «выходные данные», чтобы родительские компоненты могли прослушивать изменения от дочерних элементов.
Вот Plnkr для того, что я пытаюсь сделать. Plnker -> https://plnkr.co/edit/XpDCGIwd2at9oR74lpY5?p=preview
Когда пользователь нажимает «+ Компонент», создается следующий компонент
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
let ref = this.container.createComponent(componentFactory);
В каждом добавленном дочернем компоненте, когда пользователь щелкает «Событие пожара»
<span class="initiateParentAction"
(click)="fireEventEmitter()" [class.eventFired]="eventFired==true">Fire Output Event: {{eventFired}}</span>
он вызывает следующее
fireEventEmitter(){
console.log("Event Fired");
this.parentActionReq.emit({
action: "helloWorld"
});
this.eventFired = true;
setTimeout(() => this.eventFired=false, 2000);
}
Родительский компонент (в данном случае компонент «Приложение») прослушивает эти выходные данные, как показано здесь.
<ng-container #container
(parentActionReq)="childActionInitiated($event)"></ng-container>
Мне не удалось получить события из динамически созданных компонентов для регистрации в родительском элементе. В Plnker «Полученное дочернее событие вывода» должно стать истинным.
На данный момент я думаю, что из-за того, что эти компоненты добавляются во время выполнения, мне нужно как-то переинициализировать обнаружение событий OnInit. Но не продвинулись.
Любые предложения, подсказки, рекомендации будут оценены здесь.
Я не решаюсь пойти по пути создания своих собственных Observables, так как это похоже на воссоздание колеса, выход точно служит моей цели.
Спасибо любезно.
