Question

我安装了Angular Material Design。现在我尝试在app.module.ts文件中添加它：

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

我应该在章节中解释：imports: []？加载所有材料实体。

我尝试过：imports: ['MaterialModule']但不推荐使用

Answer 1

MaterialModule在版本2.0.0-beta.3中已弃用，并且已在2.0.0-beta.11版本中完全删除。有关详细信息，请参阅此CHANGELOG。请完成重大修改。

重大变化

Angular Material现在需要Angular 4.4.3或更高版本
已删除MaterialModule 。
对于beta.11，我们已决定弃用“md”前缀完全和使用“mat”继续前进。

请完成CHANGELOG我们会得到更多答案！

以下示例 cmd

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 2

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

＆＃13;

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

＆＃13;

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

Answer 3

将所有Angular Material模块导入Angular 9。

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

SERVICE_CONTROL_DEVICEEVENT

Answer 4

从Angular version 9开始：

重大更改：

不再可以通过“ @ angular / material”导入组件。采用各个辅助入口点，例如 @ angular / material / button。

这意味着：

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

成为：

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

Answer 5

beta3 版本中不推荐使用MaterialModule，其目标是开发人员只应将他们要使用的内容导入其中，从而改善捆绑包的大小。

开发人员现在有两个选择：

创建自定义 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之后的模块，因为导入顺序很重要 NgModules。

Answer 6

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

ng add @angular/material

然后安装了所有有角度的材料包，并更新了我的package.json文件。

这是最简单的方法。

Answer 7

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

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

Answer 8

第1步

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

安装材料并将其添加到Angular项目中

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

ng add @angular/material

ng add命令将另外执行以下配置：

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

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

详细了解此here

Answer 10

Click here to see Error message screenshot

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

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

仅在下面导入： 从“ @ angular / material”导入{MatIconModule};

如何导入角材料？

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

如何在项目中导入Angular Material？

10 个答案: