NgModule nested forRoot

Question

考虑到有一个模块

@NgModule({
imports: [
Ng2Webstorage.forRoot({ prefix: 'SOME_PREFIX' }),
FooModule.forRoot(...),
BarModule,
],
exports: [
Ng2Webstorage,
FooModule,
BarModule,
]
})
class FeatureModule {
static forRoot(config): ModuleWithProviders {
return {
ngModule: FeatureModule,
providers: [...]
};
}
}

它如何动态地传递prefixNg2Webstorage.forRoot？喜欢：

@NgModule({
imports: [
BarModule,
],
exports: [
Ng2Webstorage,
FooModule,
BarModule,
]
})
class FeatureModule {
static forRoot(config): ModuleWithProviders {
return {
ngModule: FeatureModule,
imports: [
Ng2Webstorage.forRoot({ prefix: config.name }),
FooModule.forRoot(config.foo)
],
providers: [...]
};
}
}
...
imports: [FeatureModule.forRoot({ name: `ANOTHER_PREFIX` }), ...]
...

是否可以嵌套forRoot调用？

看起来ModuleWithProviders不接受imports.

Answer 1

是的，你是对的。我们不能将imports传递给ModuleWithProviders导入。

以下是 angular 如何从此类导入中收集数据：

} else if (importedType && importedType.ngModule) {
const moduleWithProviders: ModuleWithProviders = importedType;
importedModuleType = moduleWithProviders.ngModule;
if (moduleWithProviders.providers) {
providers.push(...this._getProvidersMetadata(
moduleWithProviders.providers, entryComponents,
`provider for the NgModule '${stringifyType(importedModuleType)}'`, [],
importedType));
}

https://github.com/angular/angular/blob/4.3.x/packages/compiler/src/metadata_resolver.ts#L448-L456

我们可以通过在 Ng2Webstorage.forRoot((ModuleWithProviders.providers中传递相同的提供程序来覆盖 Ng2Webstorage.forRoot(( 中定义的提供程序，如下所示：

import {Ng2Webstorage, WEBSTORAGE_CONFIG} from 'ngx-webstorage';
@NgModule({
imports: [
Ng2Webstorage.forRoot()
],
...
})
export class FeatureModule {
static forRoot(config): ModuleWithProviders {
return {
ngModule: FeatureModule,
providers: [
{ provide: WEBSTORAGE_CONFIG, useValue: config }
]
};
}
}

Answer 2

可以通过显式重新定义forRoot()中的提供程序来实现。包的其他元素可以按常规方式导入和导出。

请注意，我使用 Array.concat(( 轻松链接多个模块。

@NgModule({
imports: [
BarModule,
],
exports: [
Ng2Webstorage,
FooModule,
BarModule,
]
})
class FeatureModule {
static forRoot(config): ModuleWithProviders {
return {
ngModule: FeatureModule,
/* Explicitly redefine the providers from imported/exported modules. */
providers: [].concat(
Ng2Webstorage.forRoot({ prefix: config.name }).providers,
FooModule.forRoot(config.foo).providers
)
};
}
}

编辑：

当您使用 AOT 编译时，上述内容不起作用。相反，对静态导出函数和类型参数使用以下解决方法，例如config.

export function ng2WebstorageProviders(name: string) {
return Ng2Webstorage.forRoot({ prefix: name }).providers;
}
export function fooProviders(foo: object) {
return FooModule.forRoot(foo).providers;
}
@NgModule({
imports: [
BarModule,
],
exports: [
Ng2Webstorage,
FooModule,
BarModule,
]
})
class FeatureModule {
static forRoot(config: {name: string, foo: object}): ModuleWithProviders {
return {
ngModule: FeatureModule,
/* Explicitly redefine the providers from imported/exported modules. */
providers: [
...ng2WebstorageProviders(config.name),
...fooProviders(config.foo)
]
};
}
}

供参考：

• AOT - 不支持函数调用 Module.forRoot
• https://github.com/angular/angular/issues/23609