Question

每当我想使用功能模块时，我就会遇到使用Angular 6和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，则应用会因此错误而崩溃 Uncaught (in promise): TypeError: Cannot read property 'call' of undefined。
如果我尝试将MatButtonModule导入到一个模块中，它只适用于绑定到该模块的组件。
如果我尝试将MatButtonModule直接导入app.module.ts，则根本无法正常工作。

所以我的问题是，如何将Angular Material与特征模块一起使用，最佳实践是什么？

谢谢！

Answer 1

我建议您创建另一个模块并将其命名为MaterialModule并将其放在应用程序的根目录中，然后导出要在您的应用程序中使用的所有材料模块，即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中，以便我可以确切地检查您的代码是什么问题。

祝你好运

Answer 2

您可以创建一个导出所有Angular Material模块的material.module.ts共享模块。然后在两个模块中导入材料模块。模块看起来像。

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material';
@NgModule({
  imports: [ ],
  exports: [ MatButtonModule ]
})
export class MaterialModule {}

具有特征模块和角度6的角度材料

2 个答案: