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

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。请通过突破性更改。

重大更改

• 角料，现在需要角4.4.3或更高
• MaterialModule已被删除。
• 对于beta.11，我们已经做出决定弃用“MD”前缀 完全和使用“垫”前进。

请经过CHANGELOG我们会得到更多的答案！下面所示

例CMD

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

的 '应用程序' 文件夹内创建文件（material.module.ts）上app.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 {} 

进口

​​

您的组件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'; 

所以这种情况下你不希望导入

​​

在app.module.ts

Answer 2

的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到主模块，如果你想在 动画工作
• 随着最新版本的开发者现在需要始终BrowserModule后加入@angular/cdk他们package.json（材料依赖性）
• 进口的材料模块，由文档说明：

无论接近你使用时，一定要导入角角料的BrowserModule后 模块，作为进口秩序事项 NgModules。

Answer 3

如果要导入所有材料模块，创建自己的模块即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