@Output 来自 Angular 6 中动态创建的组件答案

【问题标题】：@Output from dynamically created Component in Angular 6@Output 来自 Angular 6 中动态创建的组件
【发布时间】：2019-01-15 05:53:39
【问题描述】：

在我的 Angular 6 项目中，我有一个动态创建的组件，如下所示：

@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 是父级，TasksComponent 是子级。现在我希望使用@Output 将一些数据从TasksComponent 传递到StaffDashComponent。我怎样才能做到这一点？

【问题讨论】：

标签： angular typescript angular6

【解决方案1】：

对于动态创建的子组件，您必须在父组件内订阅输出事件。

parent.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));
}

儿童补偿

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

【讨论】：