如何在Angular 9中导入所有Angular Material模块

沙jan

我想导入所有角度材料模块并用于整体角度项目模板。

沙jan

我们可以创建一个新模块,并将所有材料模块导入新模块中,然后使用到我们的模板中。

请使用此命令并运行Angular CLI: ng g m material --module=app

--module=app-此命令将自动导入新创建的MaterialModule模块,并将其添加到AppModule imports []数组中。

现在打开MaterialModule文件和Ctrl+ C/ Ctrl+ P

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Material Form Controls
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
// Material Navigation
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
// Material Layout
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatListModule } from '@angular/material/list';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTreeModule } from '@angular/material/tree';
// Material Buttons & Indicators
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatBadgeModule } from '@angular/material/badge';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatRippleModule } from '@angular/material/core';
// Material Popups & Modals
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
// Material Data tables
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatCardModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatListModule,
    MatStepperModule,
    MatTabsModule,
    MatTreeModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatBadgeModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatRippleModule,
    MatBottomSheetModule,
    MatDialogModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule
  ],
  exports: [
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatCardModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatListModule,
    MatStepperModule,
    MatTabsModule,
    MatTreeModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatBadgeModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatRippleModule,
    MatBottomSheetModule,
    MatDialogModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule
  ]
})
export class MaterialModule { }

完成!!!

现在,我们可以在模板中使用材料组件。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在 Angular 4 中导入自定义模块?

如何在 angular 8 中导入表单模块

在Angular2中导入模块

找不到模块“ @ angular / material”

如何在angular 8中的Web Worker中导入打字稿模块?

如何使用Angular Material 2创建自己的Material模块?

如何在Angular的所有模块中包含配置部分?

如何在Angular 9中导入automapper-ts

Angular 2+,有什么方法可以声明一个模块中的所有组件,然后在 app.module.ts 中导入?

在Angular中导入库/模块

在Angular中导入很多模块

如何从TypeScript目录中导入所有模块?

如何在Angular 4.x(Angular Cli)App中导入RequireJS(AMD)模块?

从Angular 8中的库中导入所有类

在Angular 4中的多个模块中导入组件

从Angular 4中的其他包中导入模块

如何在 Angular 中从节点模块导入单个脚本

如何在Angular 2中创建导入QuillJS模块的组件?

在Angular中导入模块后,如何从模块中自动运行服务?

如何在Angular 9中通过变量加载动态模块?

如何在Angular 2 eg中导入非核心npm模块(以使用加密库)?

如何导入共享模块(使用 Angular Material)来测试 Angular 应用程序?

如何在没有方法的Angular中存根导入的模块?

如何在Angular中定位MatSnackBar模块?

如何在Angular 2中包含模块

在Angular中导入外部模块功能

错误:模块 '"@angular/material"' 没有导出成员 "..."

如何将 TypeScript 类集中导入 Angular 模块?

如何使用ModuleWithProviders在Angular Module中导入其他模块