Angular Material 仅在通过路由器模块中的共享模块导入时可用

Question

按照 Angular 指南，我正在尝试创建一个包含多个功能模块的示例项目。

为了在每个模块中使用 Angular Material，我创建了一个共享模块来导入和导出这些材质模块。在需要 Angular 材质的地方导入此共享模块。

根据指南，每个功能模块都应该有自己的路由器模块，因此我为每个功能创建了一个。

我想只保留路由模块中的路由相关项目，因此将共享模块导入功能模块中，令我惊讶的是它不起作用，即材料指令不起作用。

//Feature Module
@NgModule({
    imports: [..., SharedModule], //SharedModule import doesn't make material available
    declarations: []
})

一旦我在路由器模块中导入了这个共享模块，材质组件就开始工作了。

//Feature Router Module
@NgModule({
    imports: [..., SharedModule], //SharedModule makes material available
    declarations: []
})

如何通过在功能模块中导入共享模块使其工作？

演示地址：https://stackblitz.com/edit/angular-segregated-modules?embed=1&file=src/app/Modules/Sub/sub.module.ts

Answer 1

查看您链接的 StackBlitz，SubComponent 在SubRoutesModule 中声明。该组件只能访问它声明的模块的导入，这解释了您描述的问题。

如何通过在功能模块中导入共享模块来使其工作？

从SubRoutesModule 中的声明中删除SubComponent，并将其添加到SubModule 中的声明中。