如何在項目中導入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