在离子项目中导入角度材质组件

Question

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

我试图直接在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 { }