当父组件不使用子组件选择器时，如何将数据从子组件传递到Angular6中的父组件？

Question

I am adding a child component to a parent component dynamically using ViewContainerRef so not using child selector in parent selector template or in html.

How to pass data from child to parent component in this case?

Answer 1

So basically let's suppose that you have:

Child component

export class ChildComponent {
   ...
   outputData: EventEmitter<any> = new EventEmitter<any>();
   ...

   triggerChange() {
      // here you just emit some data using event emitter
      this.outputData.emit(someData);
   }
}

Then in parent component you can access data from EventEmitter like:

Parent component

export class ParentComponent {

   attachChild() {
      ...
      let componentRef = viewContainerRef.createComponent(componentFactory);
      (<ChildComponent>componentRef.instance).outputData.subscribe(this.outputData.bind(this));
   }

   onDataChange(someData) {
      // here you can access child's data when event emitter triggers
      // so basically it's the same if you subscribed on @Output field from template like (outputData)="onDataChange($event)"
      console.log(someData);
   }
}

Hope that helps.