Angular Material 仅当通过路由器模块中的共享模块导入时可用
Angular Material available only when imported via Shared Module in Router Module
遵循 Angular 准则,我正在尝试创建一个示例项目,其中包含多个功能模块。
为了在每个模块中使用 Angular Material,我创建了一个共享模块来导入和导出这些 material 模块。在需要 Angular Material 的地方导入此共享模块。
根据指南,每个功能模块都应该有自己的路由器模块,因此我为每个功能创建了一个。
我只想在路由模块中保留与路由相关的项目,因此在功能模块中导入了共享模块,令我惊讶的是它不起作用,即 Material 指令不起作用。
//Feature Module
@NgModule({
imports: [..., SharedModule], //SharedModule import doesn't make material available
declarations: []
})
在路由器模块中导入此共享模块后,Material 组件开始工作。
//Feature Router Module
@NgModule({
imports: [..., SharedModule], //SharedModule makes material available
declarations: []
})
如何通过在功能模块中导入共享模块使其工作?
查看您链接的 StackBlitz,SubComponent
在 SubRoutesModule
中声明。该组件只能访问它在其中声明的模块的导入,这解释了您描述的问题。
How can I make it work by importing the Shared Module in the Feature Module?
从 SubRoutesModule
中的声明中删除 SubComponent
,并将其添加到 SubModule
中的声明。
遵循 Angular 准则,我正在尝试创建一个示例项目,其中包含多个功能模块。
为了在每个模块中使用 Angular Material,我创建了一个共享模块来导入和导出这些 material 模块。在需要 Angular Material 的地方导入此共享模块。
根据指南,每个功能模块都应该有自己的路由器模块,因此我为每个功能创建了一个。
我只想在路由模块中保留与路由相关的项目,因此在功能模块中导入了共享模块,令我惊讶的是它不起作用,即 Material 指令不起作用。
//Feature Module
@NgModule({
imports: [..., SharedModule], //SharedModule import doesn't make material available
declarations: []
})
在路由器模块中导入此共享模块后,Material 组件开始工作。
//Feature Router Module
@NgModule({
imports: [..., SharedModule], //SharedModule makes material available
declarations: []
})
如何通过在功能模块中导入共享模块使其工作?
查看您链接的 StackBlitz,SubComponent
在 SubRoutesModule
中声明。该组件只能访问它在其中声明的模块的导入,这解释了您描述的问题。
How can I make it work by importing the Shared Module in the Feature Module?
从 SubRoutesModule
中的声明中删除 SubComponent
,并将其添加到 SubModule
中的声明。