尝试使用forRoot()延迟加载与Angular Material相关的自定义模块的延迟加载组件不起作用

时间:2019-01-31 07:05:57

标签: angular angular-material lazy-loading angular-routing ng-modules

我有一个通过角度路由设置的延迟加载模块,我正在使用angular-material包来渲染数据。按照建议,我为名为MaterialModule的materail-components创建了一个自定义模块(使用forRoot方法),我将它作为forRoot导入到app-module中:MaterialModule.forRoot(),,但是在我懒惰的情况下加载的组件/模块,此MaterialModule不可用,除非我也将其显式导入所有延迟加载的模块中。

app-module.ts
imports: [
BrowserModule,
AppRoutingModule,
MaterialModule.forRoot(),
CoreModule]

=============

material-module.ts
export class MaterialModule {
  static forRoot(): ModuleWithProviders {
  return {
    ngModule: MaterialModule
   }
 }
}

是否有一种方法可以使所有延迟加载的模块(例如angular)中的共享模块(例如MaterialModule)可用。

1 个答案:

答案 0 :(得分:1)

这里没问题。仅当将模块声明导出到模块中并且将模块导入要使用它们的另一个模块中时,模块声明才可用,只有提供者中的内容才能在整个应用程序中共享。

使用forRoot拥有模块只是一个约定,一次初始化事物,或构建单例模式。

但是,如果要使用该模块中的内容,则必须将其导入到需要的每个模块中,而无需forRoot。

仅涉及范围,提供者具有全局范围,这意味着它在任何地方都可见。声明具有私有范围,这意味着它们仅在当前模块内部可见。如果要在其他地方使用它们,则需要将它们导出到自己的模块中,然后将该模块导入另一个模块中以使用它们。

这里是有关ngModules的文章,它对其进行了更详细的解释:https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407

对于延迟加载,它是相同的,只是延迟加载的模块的提供程序仅在模块加载后才可用。