Angular 4动态组件加载&向父组件发送数据

时间:2017-10-18 16:58:46

标签: angular output components angular4-forms dynamic-ui

我正在使用自定义组件创建动态表单生成的poc。

我在某种程度上取得了成功,我可以根据json数组使用动态组件集创建表单。现在,我陷入了一个需要输出的实例,或者更确切地说是用户已更新相关输入的数据。

我看了@output装饰器和eventEmitter,但我无法从中得到适当的解决方案。非常感谢社区中的任何人可以给我一些单挑:)

请按照PLUNKER查看当前进度和方法。

1 个答案:

答案 0 :(得分:2)

你走在正确的轨道上,你可以在这里使用两种方法

(i)服务

(ii)使用eventEmitter - 输出装饰器

由于组件是动态的,您可以随时订阅,服务可以将数据发送回app.ts。

为了得到一个想法看看 Passing Input while creating Angular 2 Component dynamically using ComponentResolver

在您的示例中,我修改了服务 describe "POST #create" do let!(:bath) {{ establishment: "Fake Place", address: "123 Main St", city: "Cityton", state: "NY", zip: "11111", gender: "Unisex", key_needed: false, toilet_quantity: 1 }} let!(:params) { {bathroom: bath} } it "receives bathroom data and creates a new bathroom" do post :create, params: params bathroom = Bathroom.last expect(bathroom.establishment).to eq "Fake Place" end end 组件方法,并将Output事件添加到每个组件,这些组件属于app.ts

<强> DEMO