プロジェクトで角度材料をインポートするには？

Question

角材デザインをインストールしました。今私はこれを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を参照してください。壊れた変更を行ってください。

破断は

MaterialModuleが除去された4.4.3角度以上必要となりました

• 角度材質を変更します。
• は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）を作成し 'アプリケーション' フォルダ内

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

​​にインポート

コンポーネントhtmlファイル

0123いずれかの命令

の代わりに、上記の下に出力使用を取得していない場合は

<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

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

を

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

をグローバルCSS 'のstyle.css' を追加します。 interface（material.module.ts）uは、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'; 

だから、この場合uは独自のモジュールを作成し、あなたはすべての素材のモジュールをインポートする場合app.module.ts

Answer 2

を推奨されていませんMaterialModuleは、開発者が唯一の彼らが使用するため、バンドルサイズを改善しようとしているものを自分のアプリケーションにインポートする必要があることを目標としてベータ3バージョンで廃止されました。

開発者は、2つのオプションがあります。

• はMyMaterialModule輸入/輸出、アプリケーションが必要とするアプリケーションには、他の（機能）モジュールによってインポートできるコンポーネントカスタムを作成します。
• モジュールが必要とする個々のマテリアルモジュールを直接インポートします。

  import {MdButtonModule, MdCheckboxModule} from '@angular/material'; 
  
  @NgModule({ 
      imports: [MdButtonModule, MdCheckboxModule], 
      exports: [MdButtonModule, MdCheckboxModule], 
  }) 
  export class MyOwnCustomMaterialModule { } 
  

  が次にあなたがあなたのいずれかにこのモジュールをインポートすることができます。

は（material pageから抽出）の例として、以下の

最初のアプローチを取ります。

第二のアプローチ：

• ：

  import {MdButtonModule, MdCheckboxModule} from '@angular/material'; 
  
  @NgModule({ 
      ... 
      imports: [MdButtonModule, MdCheckboxModule], 
      ... 
  }) 
  export class PizzaPartyAppModule { } 
  

  今、あなたは、それは次のことを言及する価値があるPizzaPartyAppModule

  で宣言されたすべてのコンポーネントにそれぞれの材料成分を使用することができます最新バージョンの素材では、をインポートする必要がありますドキュメントで述べたように、あなたのメインモジュールへBrowserAnimationsModuleあなたは、 アニメーションは現在、常にBrowserModule後にpackage.json（材料依存性）

• インポート素材モジュールに@angular/cdkを追加する必要があり、最新バージョンの開発者と
• 仕事をしたい場合：あなたが使用してどちらのアプローチ

、 NgModulesのインポート順事項として、 モジュールの角のBrowserModule後アンギュラ素材をインポートしてください。

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