在 Angular 5 中使用多次子组件答案

【问题标题】：Using Multiple Times Child Component in Angular 5在 Angular 5 中使用多次子组件
【发布时间】：2020-12-28 14:47:06
【问题描述】：

我正在尝试学习 Angular 4+ 中的父子通信

我的问题很简单：我在子组件中有一个按钮数组列表[0, 1, 2, 3]，我在父组件my-app 中多次使用子选择器<app-child>，因此，当用户单击第一个子标签上的任何按钮时，列表将更新为 [5, 6, 7, 8] 并且它不会更新第二个标签。当用户点击第一个标签时，第二个子标签也需要更新

当我们多次使用子组件时，有什么方法可以同时更新同一时间

你可以在这里看到演示 https://stackblitz.com/edit/angular-ivy-dswut1?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

如果你想在组件之间共享数据，你需要一个单例。服务是单例的。将数据存储在服务中一次，然后将服务注入所有组件中。然后，在组件中，显示{{myService.variableName}}。
感谢您的回答。但我有一个要求，我在一个页面中多次使用相同的子组件。它在第一次工作正常，但在第二次数据没有呈现

标签： javascript angular parent-child

【解决方案1】：

您必须使用输入和输出。如果您想处理子组件数据，这是从包装器发送输入并在所需事件中获取输出的最佳方式，然后更改数据。

这里更新了 stackblitz https://stackblitz.com/edit/angular-ivy-ckqmax?file=src%2Fapp%2Fchild%2Fchild.component.html

或者您可以只使用输出并将您的 buttonList 保存在共享文件夹中。然后当按钮单击（输出发出）更改 buttonList（在父组件中导入）时，两个组件的数据都会更改，因为它们持有对 buttonList 的引用。

【讨论】：

感谢您的回答。但我有一个要求，我在一个页面中多次使用相同的子组件。它在第一次工作正常，但在第二次数据没有呈现。