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

Question

遵循建议的最佳实践，我将打算使用的所有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类的MatDialogRef ）时，我不确定该怎么做：

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

Internet上所有使用导入模块的示例（ 包括Angular Material本身 ）都直接从@angular/material导入组件，这似乎与导入模块的观点背道而驰。 我的期望是这些也应该通过我的MaterialModule传递，但是我还没有找到一个有效的过程。 一项建议是添加declarations: [MatDialogRef]添加到MaterialModule的主体。 另一个是添加entryComponents: [MatDialogRef] 。 另一个仍然是完全像模块一样导入/导出组件。 这些解决方案均无效。 TypeScript每次都会抱怨“找不到名称“ MatDialogRef””。

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

Answer 1

这里最大的区别是共享角度模块和打字稿导入的方式。

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

因此，您必须从@ angular / material导入它

Answer 2

在您的组件中，您需要从用于打字稿的角形材料中导入模块。 在您的情况下，我将如下所示：

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

请尝试此操作并共享更新。