Question

根据食谱中的example，我正在动态创建组件：

    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();

我也读过父母的subscribing to a child's 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).

Angular：从动态组件

1 个答案: