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 { }

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

1 个答案: