不清楚组件之间的角度存储/同步位置

Question

我来自React（/ Vue）背景，只是从Angular（6）项目开始，但是我对如何组织事情有些困惑。我希望有人能帮忙。

我有一个组件（我们叫它Microwave）。 Microwave可以做几件事，并且具有temperature之类的属性。根据Angular文档，我为此属性定义了@Input和@Output。

现在我有了第二个（GUI）组件来控制Microwave，例如MicrowaveControls。在这一点上，我对如何在两者之间建立通信感到困惑。我有一些策略：

• 将其中一个组件作为输入传递给另一个组件。例如。我将Microwave实例传递给MicrowaveControls。现在，我可以像MicrowaveControls一样在{{microwave.temperature}}中显示输入字段。我可以使用microwave.temperature = 100来更改值，这是一个问题，尽管更改未反映在MicrowaveControls中，但不会更新。

• 在temperature中具有MicrowaveControls属性的副本。我可以听Microwave发出的事件来同步两个值。这里的问题是，现在有两个应具有相同值的副本，这可能会导致错误等。

• 使某种服务注入到两个存储（共享）属性的组件中。在我看来，这种方法目前是最好的选择，尽管我的问题是它需要额外的开销，并且有点破坏了我的Microwave组件的独立功能。

这里最好的方法是什么？希望我能提供足够的信息！

Answer 1

Angular Docs很好地概述了组件交互。听起来好像您想使用事件发射器。

https://angular.io/guide/component-interaction#parent-listens-for-child-event

编辑：使用事件通常是父子关系的最佳实践，但是像您提到的那样在根目录中声明可注入服务是管理与没有父子关系的组件之间的状态的好方法。

Answer 2

当您来自于React时，您可能会有redux背景。

如果要维护复杂的客户端状态，请考虑使用ngrx库，它是Google的Redux启发库。