在 Ionic 项目中导入 Angular Material 组件

Question

我正在尝试在 Ionic 4 项目中使用 Angular Material。我已经通过 NPM 安装了所有需要的依赖项。为了获得更干净和可维护的代码，我创建了一个单独的ngModule，它按照 Angular Material Docs（入门部分）导入了我在应用程序中需要的所有组件。 然后，我将它导入到我想要使用它的页面模块中。 但是，当我想启动材质组件时，似乎没有使用导入，所以我无法使用该组件。

我尝试在 app.module.ts 文件中直接导入材料组件模块，结果相同。我可以直接导入每个我想使用的组件，而不是包含所有组件的模块，但我真的很想知道为什么这种方法不起作用，以及是否有什么我做错了。

这就是我的自定义模块的外观：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material';
import {MatDialogModule} from '@angular/material/dialog';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatDialogModule
  ],
  exports: [
    MatDialogModule,
    MatButtonModule
  ]
})
export class AppMaterialModule { }

这就是我尝试将它导入到我想使用它的地方的方式：

import { AppMaterialModule} from '../../app-material.module';

@NgModule({
  declarations: [],
  imports: [
    AppMaterialModule,
    ....
  ]
 ...

我希望能够使用在AppMaterialModule 中导入的所有材料组件，仅包括我当时正在使用的这个模块，但不知何故这种方法不起作用。

感谢您的帮助。

Answer 1

这是我的适用于 Ionic4 的设置。

和你一样，我有一个名为 MaterialModule 的自定义模块。 （将其精简为您需要的模块）。

import { NgModule } from '@angular/core';
import {CdkTableModule} from '@angular/cdk/table';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule } from '@angular/material';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule],
  exports: [
    BrowserModule,
    BrowserAnimationsModule,

    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule],
})
export class MaterialModule {}

我在我的app.module.ts 文件中导入：

...
import { MaterialModule } from './material.module';
...


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    MaterialModule,
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

我必须单独导入每个模块

// MatTableModule
import { MatTableModule } from '@angular/material/table';
// MatButtonModule
import { MatButtonModule } from '@angular/material/button';
...