Angular RouterModule.forRoot(ROUTES) 和 forChild(ROUTES)的区别
Angular 区别 forRoot
2023-06-13 09:15:39 时间
不少 Angular 初学者在学习 Angular 路由框架时,对 forRoot
和 forChild
这两个方法的差异都心生疑惑。
Angular 官网对两个方法的解释:
- forRoot 创建一个包含所有指令、给定路由和路由器服务本身的模块。
- forChild 创建一个包含所有指令和给定路由的模块,但不包含路由器服务。
但缺乏具体的例子。
Module with providers
当我们导入模块时,通常使用的是对模块类的引用。
例子:
@NgModule({
providers: [AService]
})
export class A {}
-----------------------------------
@NgModule({
imports: [A]
})
export class B
通过这种方式,所有在模块 A 上注册的 Service Providers 都将被添加到根注入器中
,并可用于整个应用程序。
另一种方式也能工作:
@NgModule({
providers: [AService]
})
class A {}
export const moduleWithProviders = {
ngModule: A,
providers: [AService]
};
----------------------
@NgModule({
imports: [moduleWithProviders]
})
export class B
我们知道延迟加载模块有自己的注入器。 因此,假设我们要注册 AService 以供整个应用程序使用,但某些 BService 仅可用于延迟加载的模块。 可以像这样重构模块:
@NgModule({
providers: [AService]
})
class A {}
export const moduleWithProvidersForRoot = {
ngModule: A,
providers: [AService]
};
export const moduleWithProvidersForChild = {
ngModule: A,
providers: [BService]
};
------------------------------------------
@NgModule({
imports: [moduleWithProvidersForRoot]
})
export class B
// lazy loaded module
@NgModule({
imports: [moduleWithProvidersForChild]
})
export class C
这样一来,Service B 将仅对子延迟加载模块可用,而 Service A 将对整个应用程序可用。
上述代码可以进一步重构为:
@NgModule({
providers: [AService]
})
class A {
forRoot() {
return {
ngModule: A,
providers: [AService]
}
}
forChild() {
return {
ngModule: A,
providers: [BService]
}
}
}
--------------------------------------
@NgModule({
imports: [A.forRoot()]
})
export class B
// lazy loaded module
@NgModule({
imports: [A.forChild()]
})
export class C
当我们通过同一个 injection token 获得 Service 的引用实例时,事情就变得更有趣了。
export const moduleWithProvidersForRoot = {
ngModule: A,
providers: [{provide: token, useClass: AService}]
};
export const moduleWithProvidersForChild = {
ngModule: A,
providers: [{provide: token, useClass: BService}]
};
当从延迟加载的模块使用单独的配置来请求 token 时,我们将获得 Service B 的实例引用。
RouterModule 使用 ROUTES 令牌获取特定于模块的所有路由。 因为它希望特定于延迟加载模块的路由在该模块内可用(类似于我们之前讨论的 Service B),所以它对延迟加载的子模块使用不同的配置:
static forChild(routes: Routes): ModuleWithProviders {
return {
ngModule: RouterModule,
providers: [{provide: ROUTES, multi: true, useValue: routes}]
};
}
相关文章
- angular组件的基本使用
- angular debounce throttle「建议收藏」
- angular子组件传值到父组件_vue子组件传值给父组件
- angular面试题及答案_angular面试
- Angular 14 新的 inject 函数介绍
- 关于 Angular 应用的入口
- 【Angular教程】-组件通信|8月更文挑战
- Angular 项目中 angular.json builder 字段的可选项介绍
- 什么是 Angular library 的 secondary entry points?
- 基于豆瓣API+Angular开发的webApp
- angular.foreach循环方法使用指南
- angular简介和其特点介绍