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

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

我会尽力保持简短,因为我确实可以正常工作,但是我无法想象这是“正确的方法”。

结构:

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

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

因此,我所做的就是让最顶层的父AppComponent组件访问dataModel,然后将其通过模板传递到链下[(dataModel)]="dataModel"

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

这可以工作,因为我可以将每个组件中的输入绑定到相同的字段,即dataModel.name,并且在我更新它时,所有组件都会反映出更改。

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

贡特·佐赫鲍尔(GünterZöchbauer)

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

如果将其添加到注释祖先的提供程序,则此组件和所有后代都将从该提供程序获取实例。

在> = RC.5如果添加的服务providers: [...]的任何@NgModule(...)不懒惰加载它将被添加作为提供者向根注射器并因此与整个应用程序(共享,只要任何后代组件还具有它作为提供者为其后代覆盖它)。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章