Angular：从动态组件传回数据

Question

根据食谱中的示例，我正在像这样动态创建组件：

    private loadComponent(): void {
        const componentFactory = this.factoryResolver.resolveComponentFactory(MyInputComponent);

        const viewContainerRef = this.componentHost.viewContainerRef;
        viewContainerRef.clear();

        const componentRef = viewContainerRef.createComponent(componentFactory);
        (<IComponent>componentRef.instance).data = data;
}

MyInputComponent 的模板如下所示：

<input type="text" [(ngModel)]="data.inputProp">

当用户输入输入时，我需要更新父级中 data.inputProp 的值。

我在一些例子中看到过这个，但不确定它有什么作用？

componentRef.changeDetectorRef.detectChanges();

我还阅读了有关在父级中订阅子级 EventEmitter的内容，但只看到了使用单击事件的示例。将包括文本输入在内的各种数据更新回父级的更好方法是什么？

我正在使用 Angular 4 RC3

Answer 1

如果要将数据发送到动态创建的组件。

this.componentRef.instance.variableName = 'abc';  // here variableName is a variable of dynamic component.

如果要从动态创建的组件中获取数据。

this.componentRef.instance.observeVariable.subscribe(result => { this.v = result;  // here observeVariable is an Observable in dynamic component(ie. this.componentRef).