2017-03-17 50 views
1

在角度文档常见问题解答部分,它指出,“与启动时加载模块的提供者不同,延迟加载模块的提供者是模块范围的。”link如何在延迟加载的模块中提供服务,并将该服务的作用域仅限于延迟加载的模块及其组件?

是否“模块范围”这里意味着仅仅在模块还是它扩展到包括属于该模块的所有组件吗?

我问的原因是因为我有一个延迟加载的模块,其中包含2个属于它的组件。我在模块中注册了一个服务,但由于某种原因,每个组件都获得了该服务的不同实例。

为了在我的延迟加载的模块中提供LazyModuleService并将该服务的作用域仅限于延迟加载模块及其组件,需要更改哪些内容?请包括所需的其他文件。我试图制作一个通用示例来帮助任何可能发现此问题的人。

延迟加载模块:

import { CommonModule } from '@angular/common'; 
import { NgModule } from '@angular/core'; 
import { Component1 } from './component1.component'; 
import { Component2 } from './component2.component'; 
import { LazyModuleService } from './lazy-module.service'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    ], 
    declarations: [ 
    Component1, 
    Component2, 
    ], 
}) 

export class LazyLoadedModule { } 
+0

您是否已将LazyModuleService配置为您的懒惰模块的任何组件中的提供者? – snorkpete

+0

不,我不知道。它只在LazyLoaded模块中配置。 – FlashBanistan

+0

我假设这是一个错字,但你没有LazyModuleService作为你的LazyModule的提供者 – snorkpete

回答

5

如何延迟加载的工作原理:

经过一番深入调查,却仿佛问题涉及到如何延迟加载实现。

在你的情况下,你的懒加载模块实际上已经路由到它的两个不同的组件 - 这两个组件直接暴露为Router.forChild路由。但是,结果是,当您导航到每个组件时,将延迟加载模块的提供程序的单独实例添加到每个组件。

由于您确实需要延迟加载模块中的所有组件共享其提供的服务的相同实例,因此您需要创建一个“根”组件,然后让您的两个组件成为该根组件的子项。

看起来好像是延迟加载时,模块中的提供程序将被添加到组件的根注入模块的注入器中。既然你有两个'根组件',它们每个都有不同的服务实例。

解决方案是创建一个根组件,其注入器将接收延迟加载的服务,然后可以由任何子组件共享。

1

只需添加您的LazyModuleService为您LazyLoadedModule提供商。您只能在该模块的组件中使用它。

+0

你是对的。 –

+1

不,这不起作用。就像我在我的问题中所说的那样,我是这么做的,它不工作。 – FlashBanistan