允许组件及其子组件在service中访问ngModel的单个实例

Angular2 Allow Components and its Sub Components to access single instance of ngModel in service

本文关键字：组件 访问 service ngModel 单个 实例 许组件      更新时间：2023-09-26

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

我会尽量保持这个简短，因为我确实有它的工作，但我不能想象这是"正确的方式"。

结构:

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

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

所以我所做的是给最上面的父AppComponent组件访问数据模型，然后通过模板[(dataModel)]="dataModel"传递它的链。

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

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

这看起来不像是一个干净的方法。

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

如果你把它添加到注释祖先的提供者中，那么这个组件和所有的后代都从这个提供者获得一个实例。

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

对于惰性加载模块，提供程序在这个惰性加载模块中被共享，因为惰性加载模块有自己的DI子作用域。

相关文章：