[英]Import Angular Material components in an Ionic Project
I'm trying to use Angular Material in an Ionic 4 Project.我正在尝试在 Ionic 4 项目中使用 Angular Material。 I have already installed all the dependencies needed through NPM.
我已经通过 NPM 安装了所有需要的依赖项。 In order to get a more clean and maintainable code, I've created a separate
ngModule
which imports all the components that I need in my application,following the Angular Material Docs(the Getting Start part).为了获得更干净和可维护的代码,我创建了一个单独的
ngModule
,它导入了我的应用程序中需要的所有组件,遵循 Angular Material Docs(入门部分)。 Then, I've imported it in the page module where I want to use it.然后,我将它导入到我想使用它的页面模块中。 However, when I want to start the material component, It looks like the import is not being used, so I can't use the component.
但是,当我要启动材质组件时,看起来没有使用导入,因此无法使用该组件。
I've tried to import the material components module directly in the app.module.ts file, with the same results.I could just import each component that I want to use directly,instead of the module with all of them, but I really want to know why this approach is not working, and if is there anything I'm not doing correctly.我已经尝试在 app.module.ts 文件中直接导入材料组件模块,结果相同。我可以直接导入我想直接使用的每个组件,而不是所有组件的模块,但我真的想知道为什么这种方法不起作用,如果有什么我做错的地方。
So this is how my custom module looks:所以这就是我的自定义模块的外观:
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 { }
And this how I'm trying to import it where I want to use it:这就是我尝试将它导入到我想使用它的地方的方式:
import { AppMaterialModule} from '../../app-material.module';
@NgModule({
declarations: [],
imports: [
AppMaterialModule,
....
]
...
I expect to be able to use all the material components imported in AppMaterialModule
just including this module where I'm using then, but somehow this approach is not working.我希望能够使用
AppMaterialModule
导入的所有材料组件,只包括我正在使用的这个模块,但不知何故这种方法不起作用。
Thanks for your help.谢谢你的帮助。
This is my setup which works for Ionic4. 这是适用于Ionic4的设置。
Like you I have a custom module called MaterialModule
. 像您一样,我有一个名为
MaterialModule
的自定义模块。 (Trim this down to the Modules you need). (将其整理为所需的模块)。
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 {}
which I import in my app.module.ts
file: 我导入了我的
app.module.ts
文件:
...
import { MaterialModule } from './material.module';
...
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
...
MaterialModule,
...
],
providers: [
...
],
bootstrap: [AppComponent]
})
export class AppModule { }
I had to import each module separately我不得不分别导入每个模块
// MatTableModule
import { MatTableModule } from '@angular/material/table';
// MatButtonModule
import { MatButtonModule } from '@angular/material/button';
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.