页面上多次使用组件时如何从父组件发送回数据

Question

这是Angular 6中的场景。

1. 一个上传组件在同一页面上使用了两次。
2. 当使用行为主题单击任何上载组件的添加按钮时，我能够获取该特定上载组件的数据。
3. 成功上传数据后，我想向发送数据的特定上传组件返回一条消息。

结构如下。

MainComponent 
UploadComp1 UploadComp2    //These are instance of UploadComp

请如何将数据从MainComponent发送回

1. 从UploadComp1提出请求时的UploadComp1。
2. 从UploadComp2提出请求时的UploadComp2。

简而言之，是用于上传文件的组件。我们在同一页面上使用了两次，基本上，这个uploadcomponent收集文件并发送到父组件，父组件将其上传。

上传完成后，我们希望将消息从上传文件的父级发送到该特定的上传组件。

请提出建议。

谢谢

Answer 1

如果要在上载组件上设置消息属性，则可以使用@ViewChild获取对父组件中子组件的引用，然后设置所需的属性。

由于在父级上有多个上载组件，因此可以在html模板中标记它们，例如#uploadComp1, #uploadComp2,等，然后用@ViewChild('uploadComp1'), @ViewChild('uploadComp2')进行引用。

这是@ViewChild装饰器的文档