Я использую @ViewChild
для создания дочернего компонента через переменную ссылки шаблона. Я хотел бы передать данные от динамически созданного дочернего элемента его родителю любым способом, но предпочтительно с помощью декоратора @Output
.
Возможно ли это каким-либо образом?
Родитель.html
<ng-template #childComponent></ng-template>
Parent.ts
@ViewChild("childComponent", { static: true, read: ViewContainerRef })
myChildComponent: ViewContainerRef;
componentRef: ComponentRef<any>;
createComponent() {
const myChildComponentRef = this.myChildComponent;
this.componentRef = myChildComponentRef.createComponent(ChildComponent);
this.componentRef.changeDetectorRef.detectChanges();
Ребенок.html
<div class = "table-container">
Some table here, populated by data from a server response
</div>
Ребенок.ts
@Output() data = new EventEmitter<any[]>();
constructor() { }
outputData() {
this.data.emit(serverResponse);
}
Я использовал @Output
раньше и знаю, что родительский метод должен быть привязан к дочернему событию в дочернем селекторе в родительском шаблоне. Поскольку у меня нет дочернего селектора из-за шаблона ng, я не могу придумать, как это сделать.
Генераторы событий — это просто прославленные наблюдаемые объекты.
Когда вы создаете свой дочерний компонент, вы можете вызвать
this.componentRef.data.subscribe(...);
Не забудьте отписаться, чтобы избежать утечек памяти!
Приношу извинения за поздний отзыв. Ты абсолютно прав. Я принимаю ваш ответ.