我试图研究一个角度应用程序中的多个NgModule如何一起工作,尤其是我试图了解如何将提供常用服务的SharedModule
正确地导入到延迟加载的特征模块中。
逐步:
ng new playground --routing
SharedModule
,旨在提供服务和常用的声明对象:ng generate module shared
ng generate service shared/foo
现在,我在FooService
的目录中有一个SharedModule
,但是我希望该服务由SharedModule
提供。因此,我将@Injectable
批注更改为:
@Injectable({
providedIn: SharedModule
})
因为我想保持我的AppModule
及其服务注入器尽可能的干净(在现实世界中,我还将使用CoreModule
,但这不属于我的范围。问题,让我们回到正轨)
ng generate module feature --routing
FeatureModule
让我们通过向AppRoutingModule
添加路由来延迟加载功能模块:
const routes: Routes = [
{
path: 'feature',
loadChildren: './feature/feature.module#FeatureModule'
}
];
我假设在AppModule
模板的某个地方,我有一个<router-outlet>
和一个routerLink
可以导航到/feature
。
FeatureModule
中,我们仍然必须生成要在其中导航时显示的组件:ng generate component feature/start
要使新的StartComponent
成为路由到FeatureModule
时显示的初始组件,我将调整FeatureRoutingModule
中的路由:
const routes: Routes = [{
path: '',
component: StartComponent
}];
现在,我要使用在FooService
内添加到SharedModule
的{{1}}。所以我把它注入那里。
StartComponent
export class StartComponent implements OnInit {
constructor(private foo: FooService) { }
ngOnInit() {
}
}
ng serve
并看到运行时错误!这就是我的预期,因为我没有将FeatureModule
导入SharedModule
中,因此注入器不知道FeatureModule
。FooService
。为了保持CoreModule
尽可能整洁,我将在AppModule
中实现初始应用。 CoreModule
ng generate module core
中也需要一些组件:CoreModule
现在,我还想在新的ng generate component core/core-main
中使用FooService
。因此,我们也将其注入其中:
CoreMainComponent
这一次,我不会忘记将export class CoreMainComponent implements OnInit {
constructor(private foo: FooService) { }
ngOnInit() {
}
}
导入我的SharedModule
中。但是请记住,我仍然忘记并且没有在CoreModule
中导入SharedModule
。当然,我必须在某个地方使用FeatureModule
,所以我将其导出。这是新的CoreMainComponent
装饰:
CoreModule
还将@NgModule({
imports: [
CommonModule,
SharedModule
],
declarations: [CoreMainComponent],
exports: [CoreMainComponent]
})
export class CoreModule { }
导入CoreModule
并在AppModule的模板中添加AppModule
。
<app-core-main></app-core-main>
ng serve
,我仍然会遇到运行时错误。 FeatureModule
导入CoreModule
,但SharedModule
不导入。但是在两个模块中,都使用FeatureModule
。FooService
中,注入器似乎也知道FooService
,尽管我没有将其导入。我本来以为会失败答案 0 :(得分:1)
只要您在AppModule
中导入任何非延迟加载的模块,然后该非延迟加载的模块的服务,这就是应该的工作方式< / strong>在整个应用程序中都可用。
除此之外,Angular父级和子级模块中的 共享相同的Injector! 。但是对于FeatureModule
(延迟加载的模块),它们具有自己的注入器,因此延迟加载的模块中提供的任何服务仅适用于该模块。
在您的情况下,您可以说CoreModule
是AppModule
的子模块,而SharedModule
是CoreModule
的子模块,因为两者都是非惰性的加载的模块,这就是FooService
自动在FeatureModule
中可用的原因。