创建材料模块并将其导入app.module后，角度材质主题未应用于子模块

Question

正如许多其他教程中所建议的那样，我决定从特定的角度材料模块中整理我的app.module，并创建了一个名为“材料模块”的独立模块 - 然后我将这个模块直接导入到app.module的imports数组中。

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

但是，我有一个Auth模块正在显示，并且任何角度主题都没有在该模块中应用，它们都是基本的html元素。

我确定我遗漏了一些关于模块应该如何工作的非常明显的东西但是在阅读了很多帖子和一些论坛后通过谷歌搜索+文档，我无法弄清楚我是什么失踪。

Answer 1

这里的问题不是主题，而是AuthModule不知道如何解决材料成分。

在Angular中，模块充当编译上下文，如果不将MaterialModule导入AuthModule，则材质组件在上下文之外，而角度对它们一无所知。

将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 MaterialModule {}

注意

• MaterialModule出口MatButtonModule
• AuthModule导入MaterialModule因此，AuthModule可以访问MatButtonModule中定义的组件

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

Answer 2

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

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

2. 您可以在项目文件夹中执行以使用正确的依赖项自动更新Angular项目。 ng add @angular/material