NgModule imports定义的运行时数据结构

源代码：

import {StoreModule} from '@ngrx/store';
import {reducers} from './reducer';
import { NgModule } from '@angular/core';
import { CounterComponent } from './container/component/counter/counter.component';
import { CommonModule } from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { BookManageComponent } from './container/component/bookmanage/book-manage.component';
import { SearchInputComponent } from './searchbookcomponents/search-input/search-input.component';
import { BookListComponent } from './searchbookcomponents/book-list/book-list.component';

import { BookDetailComponent} from './searchbookcomponents/book-detail/book-detail.component';

import {NgZorroAntdModule} from 'ng-zorro-antd';
import { BookManageService } from './service/book-manage.service';
import { EffectsModule } from '@ngrx/effects';
import { BookManageEffects } from './effects/book-manager.effect';

@NgModule({
  imports: [
    CommonModule,
    NgZorroAntdModule,
    FormsModule,
    ReactiveFormsModule,
    StoreModule.forFeature('example', reducers), // 这个才是关键哦,
    EffectsModule.forFeature([BookManageEffects])
  ],
  declarations: [CounterComponent, BookManageComponent,
    SearchInputComponent, BookListComponent, BookDetailComponent
  ],
  exports: [CounterComponent, BookManageComponent, BookListComponent, BookDetailComponent],
  providers: [BookManageService]
})
export class ExampleModule { }

core.js里找到this.injectorDefTypes:

展开[[Entries]]:

找到ExampleModule下的imports区域：

应用程序代码中定义的代码：

StoreModule.forFeature('example', reducers)

这个方法实际上返回了一个module StoreFeatureModule，在运行时能够看到：

应用程序编写的reducer也会出现在这里：

多层级注入器 ModuleInjector 与 ElementInjector

这部分阐述来自这篇知乎文章详解 Angular 依赖注入

• ModuleInjector：通过 @NgModule() 或者 @Injectable() 配置
• ElementInjector：通过 @Directive() 或 @Component() 中的 providers 属性中配置

ModuleInjector

1. Injectable() 的 providedIn 属性是要高于@NgModule() 的 providers 数组
2. 当使用 Injectable() 的 providedIn 属性时，优化工具可以做 tree-shaking，比如 providedIn: ‘root’

要获取更多Jerry的原创文章，请关注公众号"汪子熙":