Angular material 创建 Material 模块并将其导入 app.module 后，主题未应用于子模块

Question

正如许多其他教程中所建议的那样，我决定将我的 app.module 从特定的 angular material 模块中分离出来，并创建了一个名为 'material module' 的单独模块——然后我导入了此模块直接进入 app.module 的导入数组。

现在，如果我在 app.component.html 中有一个 material 按钮，一切都很好，并且应用了主题。

但是，我有一个通过显示的 Auth 模块，任何 angular 主题都没有应用到该模块中，它们都是基本的 html 元素。

我确信我遗漏了一些关于模块应该如何在 angular 中工作的非常明显的东西，但是在通过 google 搜索 + 文档阅读了这里的大量主题和一些论坛之后，我不知道我错过了什么。

Answer 1

您可以在 angular.json 文件中查看以下行：

"styles": [
          {
            "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
          },

Answer 2

这里的问题不在于主题，而是 AuthModule 不知道如何解析 material 组件。

在 Angular 中，模块充当编译上下文，如果您不将 MaterialModule 导入 AuthModule，则 material 组件不在上下文中angular 对他们一无所知。

将您的 MaterialModule 导入您的 AuthModule 将解决此问题，例如：

material.module.ts:

@NgModule({
  imports: [MatButtonModule, MatListModule],
  exports: [MatButtonModule, MatListModule],
})
export class MaterialModule {}

auth.module.ts

@NgModule({
  imports: [CommonModule, MaterialModule],
  providers: ...,
})
export class AuthModule {}

请注意

有关这方面的更多信息，请参阅 angular 文档 https://angular.io/guide/sharing-ngmodules

Angular material theme not applied in child module after creating Material Module and importing it into app.module