在 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';
...