通过自定义 Angular Material 模块导入组件答案

【问题标题】：Importing components through a custom Angular Material module通过自定义 Angular Material 模块导入组件
【发布时间】：2017-11-27 19:15:46
【问题描述】：

按照推荐的最佳实践，我将我打算使用的所有 Angular Material 模块导入到自定义模块中：

import { NgModule } from '@angular/core';
import {
    MatIconModule,
    MatChipsModule,
    MatCardModule,
    MatGridListModule,
    MatMenuModule,
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatTableModule,
    MatTabsModule,
    MatInputModule,
    MatDialogModule,
    MatButtonModule
} from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';

const dependencyArray = [
    // Angular Material
    MatIconModule,
    MatCardModule,
    MatGridListModule,
    MatMenuModule,
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatTableModule,
    MatTabsModule,
    MatInputModule,
    MatDialogModule,
    MatButtonModule,
    MatChipsModule,

    // flex
    FlexLayoutModule
];

/**
 * Imports needed Angular Material/flex dependencies.
 */
@NgModule({
    imports: dependencyArray,
    exports: dependencyArray
})

export class MaterialModule { }

但是，当涉及到导入组件（例如MatDialogRef）时，我不确定该怎么做：

export class MyComponent implements OnInit {
    selection: string;
    count: number;
    dialogRef: MatDialogRef<ServerDialogComponent>;
}

Internet 上所有使用导入模块 (including Angular Material itself!) 的示例都直接从 @angular/material 导入组件，这似乎与导入模块的观点背道而驰。我的期望是这些也应该通过我的MaterialModule，但我还没有找到可行的程序。一项建议是将declarations: [MatDialogRef] 添加到MaterialModule 的正文中。另一个是添加entryComponents: [MatDialogRef]。另一个仍然是像模块一样直接导入/导出组件。这些解决方案都不起作用。 TypeScript 每次都会抱怨，'找不到名称“MatDialogRef”'。

导入 Angular Material 组件的最佳做法是什么？可以通过我已经拥有的模块来完成吗？还是我应该直接从@angular/material 导入？

【问题讨论】：

你知道如何在组件上使用它吗？我也面临同样的问题
在我的情况下，我需要将该模块导入到我的组件的确切模块中，而不是在主模块中
@PauloGaldoSandoval 我最终接受了 Mitch Lamers 的建议并直接从 @angular/material 导入。
我已经按照他们说的做了模块，只需要在模块上导入你将使用主模块上没有的材料组件

标签： javascript angular angular-material2

【解决方案1】：

这里最大的区别是共享 Angular 模块和 typescript 导入的方式。

通过从你的 Angular 模块中导出一个组件，它可以在你导入它的模块的 HTML 中使用。但是，如果要将组件导入 typescript，则需要引用实际文件，因为 typescripts 需要它来编译组件的代码。

所以你必须从@angular/material 导入它

【讨论】：

【解决方案2】：

在您的组件中，您需要从 angular material 导入模块以用于打字稿。在你的情况下，我将如下：

import {MatDialogRef} from '@angular/material';

请试试这个并分享更新。

【讨论】：