Question

我正在构建具有大量功能的复杂视图。为了保持井井有条，我将其分解为几个自定义组件。

我会尽量保持这个简短，因为我确实有效，但我无法想象它是“正确的方式”。

结构：

- AppComponent(has binding to dataModel)
--LayoutComponent
---HeaderComponent
---SideMenuComponent
---MainContentComponent

我需要能够为每个组件提供访问数据模型的相同单个实例。但是当我将服务作为提供者添加到每个Component中的构造函数时，它会生成一个新的数据实例。因此，在一个组件中完成的编辑不会反映在不同组件的数据中。

所以我所做的是给予最高的父AppComponent组件访问dataModel，然后通过模板[(dataModel)]="dataModel"将其传递给链。

然后在每个组件中我添加了一个dataModel变量，该变量以null结尾，但在我构建模板后，我将其绑定到该局部变量。

这可以工作，因为我可以将每个组件中的输入绑定到同一个字段，即dataModel.name，当我更新它时，所有组件都反映了这一变化。

这似乎不是一种干净的方式。任何帮助将不胜感激。

Answer 1

如果将服务添加到每个组件的提供者，则每个组件都会获得自己的服务实例。 Angular2 DI为每个提供者维护一个实例。

如果将其添加到评论祖先的提供者，则此组件和所有后代将从此提供者获取实例。

在＆gt; = RC.5中，如果您将服务添加到非延迟加载的任何providers: [...]的{{1}} ，它将作为提供者添加到根注入器并因此与整个应用程序共享（只要任何后代组件也将其作为提供者，为其后代覆盖它）。

对于延迟加载的模块，提供程序在此延迟加载的模块中共享，因为延迟加载的模块具有自己的DI子范围。