如何在项目中导入 Angular 材质？

Question

我已经安装了 Angular Material Design。现在我尝试将其添加到app.module.ts 文件中：

import { MaterialModule } from '@angular/material';

我应该在部分中删除什么：imports: []？加载所有材质实体。

我试过了：imports: ['MaterialModule'] 但它已被弃用

Answer 1

您应该考虑将 SharedModule 用于您应用的基本材料组件，然后将您需要使用的每个模块导入到您的功能模块中。我在 medium 上写了一篇文章，解释了如何导入 Angular 材质，请查看：

https://medium.com/@benmohamehdi/how-to-import-angular-material-angular-best-practices-80d3023118de

Answer 2

我正在使用 Angular CLI 9.1.4，我所做的只是运行：

ng add @angular/material

所有的角度材料包都安装好了，我的 package.json 文件也更新了。

这是完成这项工作的最简单方法。

Answer 3

在 Angular 9 中导入所有 Angular Material 模块。

在 your_project/src/app/ 目录中创建 material.module.ts 文件并粘贴此代码。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
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';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatBadgeModule } from '@angular/material/badge';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
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 { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';


@NgModule( {
    imports: [
        CommonModule,
        BrowserAnimationsModule,
        MatCheckboxModule,
        MatCheckboxModule,
        MatButtonModule,
        MatInputModule,
        MatAutocompleteModule,
        MatDatepickerModule,
        MatFormFieldModule,
        MatRadioModule,
        MatSelectModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatMenuModule,
        MatSidenavModule,
        MatBadgeModule,
        MatToolbarModule,
        MatListModule,
        MatGridListModule,
        MatCardModule,
        MatStepperModule,
        MatTabsModule,
        MatExpansionModule,
        MatButtonToggleModule,
        MatChipsModule,
        MatIconModule,
        MatProgressSpinnerModule,
        MatProgressBarModule,
        MatDialogModule,
        MatTooltipModule,
        MatSnackBarModule,
        MatTableModule,
        MatSortModule,
        MatPaginatorModule

    ],
    exports: [
        MatButtonModule,
        MatToolbarModule,
        MatIconModule,
        MatSidenavModule,
        MatBadgeModule,
        MatListModule,
        MatGridListModule,
        MatInputModule,
        MatFormFieldModule,
        MatSelectModule,
        MatRadioModule,
        MatDatepickerModule,
        MatChipsModule,
        MatTooltipModule,
        MatTableModule,
        MatPaginatorModule
    ],
    providers: [
        MatDatepickerModule,
    ]
} )

export class AngularMaterialModule { }

Answer 4

Angular 9.0.1 更新

从这个版本开始，根 index.d.ts 中没有大量导出的桶文件。资产导入应为：

import { NgModule } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule} from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

来源：@angular/material/index.d.ts' is not a module

---

MaterialModule 在 2.0.0-beta.3 版本中已被贬低，在 2.0.0-beta.11 版本中已完全删除。有关更多详细信息，请参阅此CHANGELOG。请完成重大更改。

重大变化

• Angular 材质现在需要 Angular 4.4.3 或更高版本
• MaterialModule 已被移除。
• 对于 beta.11，我们决定弃用“md” 前缀 完全并使用“垫子”继续前进。

请转至CHANGELOG，我们会得到更多答案！

示例如下 命令

npm install --save @angular/material @angular/animations @angular/cdk
npm install --save angular/material2-builds angular/cdk-builds

在“app”文件夹中创建文件（material.module.ts）

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

在 app.module.ts 上导入

import { MaterialModule } from './material.module';

你的组件 html 文件

<div>
  <mat-toolbar color="primary">
    <span><mat-icon>mood</mat-icon></span>

    <span>Yay, Material in Angular 2!</span>

    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>
  </mat-menu>

  <mat-card>
    <button mat-button>All</button>
    <button mat-raised-button>Of</button>
    <button mat-raised-button color="primary">The</button>
    <button mat-raised-button color="accent">Buttons</button>
  </mat-card>

  <span class="done">
    <button mat-fab>
      <mat-icon>check circle</mat-icon>
    </button>
  </span>
</div>

添加全局 css 'style.css'

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/prebuilt-themes/indigo-pink.css'; 

你的组件 css

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}

mat-toolbar-row {
  justify-content: space-between;
}

.done {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;
}

如果有人没有得到输出使用下面的说明

除了上面的接口（material.module.ts），你也可以在 app.module.ts 中直接使用下面的代码。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule, MatAutocompleteModule, MatInputModule,MatFormFieldModule } from '@angular/material';

所以这种情况你不想导入

import { MaterialModule } from './material.module';

在 app.module.ts 中

Answer 5

从Angular version 9开始：

重大变化：

无法再通过“@angular/material”导入组件。采用 各个次要入口点，例如 @角/材质/按钮。

这意味着：

import { MatInputModule, MatCardModule } from "@angular/material";

变成：

import { MatInputModule } from "@angular/material/input";
import { MatCardModule } from "@angular/material/card";

Answer 6

在 Angular 项目中安装和添加材料

有一种自动/简单的方法可以将材料添加到 Angular 项目中。通过运行以下命令，使用 Angular CLI 的安装示意图来设置您的 Angular Material 项目：

ng add @angular/material

ng add 命令会额外执行以下配置：

• 将项目依赖添加到 package.json
• 将 Roboto 字体添加到您的 index.html 中
• 将 Material Design 图标字体添加到您的 index.html
• 将一些全局 CSS 样式添加到：
  • 从正文中删除边距
  • 在 html 和 body 上设置高度：100%
  • 将 Roboto 设置为默认应用程序字体

你已经完成了！ Angular Material 现在已配置为在您的应用程序中使用。

阅读更多关于这个here

Answer 7

Click here to see Error message screenshot

如果您收到此错误“compiler.js:2430 未捕获的错误：模块 'AppModule' 导入的意外指令 'MatIcon'。请添加 @NgModule 注释”

请不要从@angular/material 导入 MatIcon。

只需在下面导入： 从“@angular/material”导入 { MatIconModule }；

---

如何导入 Angular 材质？

您可以运行以下命令。 ng 添加@angular/material

Answer 8

第一步

yarn add @angular/material @angular/cdk @angular/animations

第 2 步 - 创建一个包含所有材料 UI 模块的新文件 (/myApp/src/app/material.module.ts)（没有快捷方式，您必须一个一个地包含各个模块）

import { NgModule } from '@angular/core';

    import {
      MatButtonModule,
      MatMenuModule,
      MatToolbarModule,
      MatIconModule,
      MatCardModule
    } from '@angular/material';

    @NgModule({
      imports: [
        MatButtonModule,
        MatMenuModule,
        MatToolbarModule,
        MatIconModule,
        MatCardModule
      ],
      exports: [
        MatButtonModule,
        MatMenuModule,
        MatToolbarModule,
        MatIconModule,
        MatCardModule
      ]
    })
    export class MaterialModule {}

第 3 步 - 导入新创建的模块并将其添加到您的 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module'; // material module imported

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule // MAteria module added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 9

MaterialModule 在 beta3 版本中已被弃用，其目的是让开发人员只应将他们将要使用的内容导入到他们的应用程序中，从而改进包大小。

开发者现在有两种选择：

• 创建一个自定义 MyMaterialModule，它可以导入/导出您的应用程序所需的组件，并且可以由您的应用程序中的其他（功能）模块导入。
• 直接将模块所需的各个材料模块导入其中。

以以下为例（摘自material page）

第一种方法：

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule],
  exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

然后你可以将这个模块导入你的任何一个。

第二种方法：

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

现在您可以在所有声明于PizzaPartyAppModule

的组件中使用各自的材质组件

值得一提的是：

• 使用最新版素材，需要导入 BrowserAnimationsModule 进入你的主模块，如果你想要 动画工作
• 使用最新版本的开发人员现在需要将@angular/cdk 添加到他们的package.json（材料依赖项）
• 始终在BrowserModule 之后导入材料模块，如文档所述：

无论您使用哪种方法，请务必导入 Angular 材质 Angular 的 BrowserModule 之后的模块，因为导入顺序对 Ng 模块。

Answer 10

如果您想导入 所有 Material 模块，请创建您自己的模块，即 material.module.ts 并执行以下操作：

import { NgModule } from '@angular/core';
import * as MATERIAL_MODULES from '@angular/material';

export function mapMaterialModules() {
  return Object.keys(MATERIAL_MODULES).filter((k) => {
    let asset = MATERIAL_MODULES[k];
    return typeof asset == 'function'
      && asset.name.startsWith('Mat')
      && asset.name.includes('Module');
  }).map((k) => MATERIAL_MODULES[k]);
}
const modules = mapMaterialModules();

@NgModule({
    imports: modules,
    exports: modules
})
export class MaterialModule { }

然后将模块导入你的app.module.ts