以AsmStoreModule為例：import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { StateConfig, StorageSyncType } from '../../state/config/state-config';
import { StateModule } from '../../state/state.module';
import { ASM_FEATURE } from './asm-state';
import { effects } from './effects/index';
import { metaReducers, reducerProvider, reducerToken } from './reducers/index';
import { provideDefaultConfigFactory } from '../../config/config-providers';
export function asmStoreConfigFactory(): StateConfig {
const config: StateConfig = {
state: {
storageSync: {
keys: {
'asm.asmUi': StorageSyncType.LOCAL_STORAGE,
'asm.csagentToken.value.access_token': StorageSyncType.LOCAL_STORAGE,
'asm.csagentToken.value.token_type': StorageSyncType.LOCAL_STORAGE,
'asm.csagentToken.value.expires_in': StorageSyncType.LOCAL_STORAGE,
'asm.csagentToken.value.expiration_time':
StorageSyncType.LOCAL_STORAGE,
'asm.csagentToken.value.scope': StorageSyncType.LOCAL_STORAGE,
'asm.csagentToken.value.userId': StorageSyncType.LOCAL_STORAGE,
},
},
},
};
return config;
}
@NgModule({
imports: [
CommonModule,
HttpClientModule,
StateModule,
StoreModule.forFeature(ASM_FEATURE, reducerToken, { metaReducers }),
EffectsModule.forFeature(effects),
],
providers: [
provideDefaultConfigFactory(asmStoreConfigFactory),
reducerProvider,
})
export class AsmStoreModule {}裡面有一個asmStoreConfigFactory，這個工廠函數傳回了一個config對象：
在@NgModule修飾的AsmStoreModule裡面，providers區域的定義，将該工廠函數傳入了另一個helper函數：
這個helper函數隻是把調用者傳入的configFactory和deps，組成成providers數組接收的對象裡的useFactory和deps字段。另兩個字段provide傳入的是寫死好的DefaultConfigChunk這個injection token和multi為true的标志位。
觀察一下運作時，這個asmStoreConfigFactory是如何被調用的：
我們在module裡實作的factory方法調用完畢之後，傳回的config對象：