从 RouterModule.forRoot 方法说起
每个 Angular 开发人员在学习路由设计时,都遇到过如下的代码:
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/index', pathMatch: 'full' }
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
...
})
export class AppModule { }
这个约定也用在 ngx-bootstrap 和 Angular Material 中。其命名约定意味着,在调用 forRoot() 方法时,必须向应用程序的根 NgModule 注册给定模块。 那为什么它需要在应用程序的根 module 中调用,而不是任何其他 NgModule?
首先,forRoot() 约定返回什么数据类型? 通常,此方法的返回类型是符合 ModuleWithProviders
接口的对象。 这个接口是一个被接受的 NgModule import 并且有两个属性:
interface ModuleWithProviders {
ngModule: Type<any>
providers: Provider[]
}
简而言之,forRoot() 方法返回一个 NgModule 及其提供者依赖项。 这与根 NgModule 有什么关系? 事实上,虽然这个约定暗示着它应用在应用程序的根目录中导入,但在许多情况下,我们可以在非根 NgModule 中导入它,同样会起作用。
下面是一个例子,ngx-bootstrap 中的 ModalModule 使用 forRoot() 约定的方式:
import { NgModule, ModuleWithProviders } from '@angular/core';
import { ModalBackdropComponent } from './modal-backdrop.component';
import { ModalDirective } from './modal.component';
import { PositioningService } from '../positioning';
import { ComponentLoaderFactory } from '../component-loader';
@NgModule({
declarations: [ModalBackdropComponent, ModalDirective],
exports: [ModalBackdropComponent, ModalDirective],
entryComponents: [ModalBackdropComponent]
})
export class ModalModule {
public static forRoot(): ModuleWithProviders {
return {ngModule: ModalModule, providers: [ComponentLoaderFactory, PositioningService]};
}
}
注意: ModalModule 没有在 @NgModule 装饰器中声明任何提供者,而是在静态 forRoot() 方法中声明。
尽管调用 forRoot() 方法理论上可以在子 NgModules 中工作,但在应用程序的根 module 中调用 forRoot,能带来如下收益。当使用 @Injectable 装饰一个类并在 NgModule 中注册为提供者时,这个类被唯一
创建一次,并且一个实例在整个应用程序中共享。 当 Angular 引导根 NgModule 时,所有 NgModule
中的所有可用导入,都会在那时注册并可供整个应用程序使用——它们是全局的。 这就是为什么在子 NgModule 中注册的提供程序在整个应用程序中都可用的原因。
相关文章
- Pytorch中获取模型摘要的3种方法
- 【Android Gradle 插件】自定义 Gradle 任务 ③ ( Gradle 自定义任务创建方法 Project#task 函数 | Task#doFirst 函数用法 )
- SQL Server存储过程中编写事务处理的方法小结
- booksLinux下阅读电子书的方法(linuxreade)
- 定义MySQL中查看函数定义的方法(mysql查看函数)
- Linux查看本机IP地址的简便方法(linux查看本机地址)
- 深入了解neo4j数据库:探索高性能图形数据库管理系统的使用方法(neo4j使用)
- Linux查看文件大小的简便方法(linux获取文件大小)
- php获取post中的json数据的实现方法
- C#WinForm中Panel实现用鼠标操作滚动条的实例方法