如何在项目中导入 Angular Material? [英] How to import Angular Material in project?

问题描述

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

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

我应该在部分确定什么:imports: []?加载所有材料实体.

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

解决方案

针对 Angular 9.0.1 的更新

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

import { NgModule } from '@angular/core';从'@angular/material/card' 导入 { MatCardModule };从'@angular/material/button' 导入 { MatButtonModule};从'@angular/material/menu' 导入 { MatMenuModule };从'@angular/material/toolbar' 导入 { MatToolbarModule };从'@angular/material/icon' 导入 { MatIconModule };进口 {垫按钮模块，垫菜单模块，垫工具栏模块，MatIcon模块，垫卡模块来自'@angular/material';@NgModule({进口:[垫按钮模块，垫菜单模块，垫工具栏模块，MatIcon模块，垫卡模块],出口:[垫按钮模块，垫菜单模块，垫工具栏模块，MatIcon模块，垫卡模块]})导出类 MaterialModule {}

来源:@angular/material/index.d.ts' 不是模块

<小时>

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

重大变化

• Angular Material 现在需要 Angular 4.4.3 或更高版本
• MaterialModule 已被删除.
• 对于 beta.11，我们已决定弃用md" 前缀完全并使用垫子"向前推进.

请通过 CHANGELOG 我们会得到更多答案！>

示例如下命令

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

在'app'文件夹内创建文件(material.module.ts)

import { NgModule } from '@angular/core';进口 {垫按钮模块，垫菜单模块，垫工具栏模块，MatIcon模块，垫卡模块来自'@angular/material';@NgModule({进口:[垫按钮模块，垫菜单模块，垫工具栏模块，MatIcon模块，垫卡模块],出口:[垫按钮模块，垫菜单模块，垫工具栏模块，MatIcon模块，垫卡模块]})导出类 MaterialModule {}

在 app.module.ts 上导入

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

您的组件 html 文件

<mat-toolbar color="primary"><span><mat-icon>心情</mat-icon></span><span>是的，Angular 2 中的材料！</span><button mat-icon-button [mat-menu-trigger-for]="menu"><mat-icon>more_vert</mat-icon></mat-toolbar><mat-menu x-position="before" #menu="matMenu"><button mat-menu-item>选项1</button><button mat-menu-item>选项2</button></mat-menu><垫卡><button mat-button>All</button><button mat-raised-button>的</button><button mat-raised-button color="primary"></button><button mat-raised-button color="accent">按钮</button></mat-card><span class="done"><button mat-fab><mat-icon>勾号</mat-icon></span>

添加全局 css 'style.css'

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

你的组件 css

body {边距:0；字体系列:Roboto，无衬线；}垫卡{最大宽度:80%；保证金:2em 自动；文本对齐:居中；}垫工具栏行{对齐内容:间隔；}.完毕 {位置:固定；底部:20px；右:20px；白颜色;}

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

代替上面的接口(material.module.ts)你也可以直接在app.module.ts中使用下面的代码.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';从@angular/platform-b​​rowser/animations"导入 { BrowserAnimationsModule };import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule, MatAutocompleteModule, MatInputModule,MatFormFieldModule } from '@angular/material';

所以这种情况下你不想导入

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

在 app.module.ts 中

I have installed Angular Material Design. Now I try to add this in app.module.ts file:

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

What I should decify in section: imports: []? that to load all material entities.

I tried: imports: ['MaterialModule'] but it is deprecated

解决方案

UPDATE for Angular 9.0.1

Since this version there is no barrel file for massive exports in the root index.d.ts. The assets imports should be:

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

source: @angular/material/index.d.ts' is not a module

---

MaterialModule was depreciated in version 2.0.0-beta.3 and it has been removed completely in version 2.0.0-beta.11. See this CHANGELOG for more details. Please go through the breaking changes.

Breaking changes

• Angular Material now requires Angular 4.4.3 or greater
• MaterialModule has been removed.
• For beta.11, we've made the decision to deprecate the "md" prefix completely and use "mat" moving forward.

Please go through CHANGELOG we will get more answer!

Example shown below cmd

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

Create file (material.module.ts) inside the 'app' folder

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

import on app.module.ts

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

Your component html file

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

Add global css 'style.css'

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

Your component 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;
}

If any one didn't get output use below instruction

instead of above interface (material.module.ts) u can directly use below code also in the 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';

So this case u don't want to import

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

in the app.module.ts

这篇关于如何在项目中导入 Angular Material?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！