typescript - @Output desde un Componente creado dinámicamente en Angular 6

En mi proyecto de Angular 6, tengo un componente creado dinámicamente como el siguiente:

@Component({
    selector: 'app-staff-dash',
    template: `
    <template #tasksContainer></template>
`
})

export class StaffDashComponent implements OnInit {

    componentRef: any;
    factory: any;
    @ViewChild('tasksContainer', { read: ViewContainerRef }) tasksEntry: ViewContainerRef;


    constructor(
        @Inject(ComponentFactoryResolver) private resolver: ComponentFactoryResolver
    ) {

    }

    ngOnInit() {
        this.createTasksComponent();
    }


    createTasksComponent(): void {
        this.tasksEntry.clear();
        this.factory = this.resolver.resolveComponentFactory(TasksComponent);
        this.componentRef = this.tasksEntry.createComponent(this.factory);
    }
}

StaffDashComponent es el componente padre y TasksComponent es el componente hijo. Ahora quiero que algunos datos se pasen desde TasksComponent hacia StaffDashComponent usando @Output. ¿Cómo puedo lograr eso?

Respuesta #1

Para un componente hijo creado dinámicamente, tienes que suscribirte al evento de salida dentro del componente padre.

padre.comp

createTasksComponent(): void {
        this.tasksEntry.clear();
        this.factory = this.resolver.resolveComponentFactory(TasksComponent);
        this.componentRef = this.tasksEntry.createComponent(this.factory);
        //subscribe to child output event
        this.componentRef.instance.outputEvent.subscribe(val => console.log(val));
}

compañía infantil

@Output() outputEvent : EventEmitter<boolean> = new EventEmitter<boolean>(); 
someFunc() {
      this.outputEvent.emit(true)
}