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

Question

正如许多其他教程中所建议的那样，我决定将我的 app.module 与特定的 Angular Material 模块分开，并创建了一个名为“ Material 模块”的单独模块——然后我将该模块直接导入到 app.module 的导入数组中。

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

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

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

Answer 1

这里的问题不在于主题，而在于 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 {}

注意

MaterialModule导出 MatButtonModule

AuthModule进口MaterialModule因此，AuthModule 可以访问 MatButtonModule 中定义的组件。

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