Angular2 允许组件及其子组件访问服务中的单个 ngModel 实例

Question

我正在构建具有很多功能的复杂视图。为了使事情井井有条，我将其分解为几个自定义组件。

我会尽量保持简短，因为它确实有效，但我无法想象它是 "right way"。

结构：

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

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

所以我所做的是让最顶层的父 AppComponent 组件访问数据模型，然后通过模板 [(dataModel)]="dataModel".

将其向下传递到链中

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

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

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

Answer 1

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

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

在 >= RC.5 中，如果您将服务添加到任何 @NgModule(...) 的 providers: [...] 中 不是惰性加载的 ，它将被添加为提供者到根注入器并因此与整个应用程序共享（只要任何后代组件也将它作为提供者覆盖它的后代）。

对于延迟加载模块，提供程序在此延迟加载模块内共享，因为延迟加载模块有自己的 DI 子作用域。