具有功能模块和 Angular 6 的 Angular Material

Question

每当我想使用功能模块时，我在将 Angular Material 与 Angular 6 一起使用时遇到问题。这是我的项目结构:

app/
|- app.component.ts
|- app.component.html
|- app.module.ts
|- app-routing.module.ts
|- homepage/
  |- homepage.module.ts
  |- homepage-routing.module.ts
  |- pages/
    |- homepage.component.html
    |- homepage.component.ts
    |- homepage.component.css
|- inbox/
  |- inbox.module.ts
  |- inbox-routing.module.ts
  |- pages/
    |- inbox.component.html
    |- inbox.component.ts
    |- inbox.component.css

收件箱和主页都是延迟加载的。我正在尝试在 homepage.component.html 和 inbox.component.html 中使用 Angular Material(我想使用 MatButtonModule)但没有这样做，官方文档对我没有帮助。

这是我尝试过的:

• 如果我尝试将 MatButtonModule 导入到 homepage.module.ts 和 inbox.module.ts 中，应用程序将崩溃并出现此错误未捕获( promise ):TypeError:无法读取未定义的属性“调用”。
• 如果我尝试将 MatButtonModule 导入到一个模块中，它将仅适用于绑定(bind)到该模块的组件。
• 如果我尝试将 MatButtonModule 直接导入到 app.module.ts 中，它根本无法工作。

所以我的问题是，如何将 Angular Material 与功能模块一起使用，最佳做法是什么？

Answer 1

我建议你制作另一个模块并将其命名为 MaterialModule 并将其放在你的应用程序的根目录中，然后导出你想要在你的应用程序中使用的所有 Material 模块，即如下所示的 MatButtonModule

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';

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

然后将 MaterialModule 导入两个模块( inbox.module.ts 和 homepage.module.ts )

如果此解决方案不起作用，请将您的代码添加到 stackblitz 中这样我就可以准确检查您的代码有什么问题。

祝你好运