web-dev-qa-db-ja.com

プロジェクトにAngularマテリアルをインポートする方法は？

Angular Material Designをインストールしました。今、私はこれをapp.module.tsファイルに追加しようとしています：

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

セクションimports: []で明確にする必要があるものすべてのマテリアルエンティティをロードします。

試してみました：imports: ['MaterialModule']が廃止されました

angularangular-material
31
OPV

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内

75
Rijo

all Materialモジュールをインポートする場合は、独自のモジュール、つまり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にインポートします

9
Taylor

MaterialModuleは、開発者が使用するもののみをアプリケーションにインポートし、バンドルサイズを改善することを目的として、betaバージョンで廃止されました。

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

  • customMyMaterialModuleを作成します。これは、アプリケーションに必要なコンポーネントをインポート/エクスポートし、アプリケーション内の他の（機能）モジュールによってインポートできます。
  • モジュールに必要な個々の材料モジュールを直接インポートします。

以下を例に取ります（ 素材ページ から抽出）

最初のアプローチ：

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule],
  exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

その後、このモジュールを任意のモジュールにインポートできます。

2番目のアプローチ：

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

これで、すべてのコンポーネントでそれぞれの材料コンポーネントを使用できますdeclared inPizzaPartyAppModule

以下に言及する価値があります。

  • 素材の最新バージョンでは、アニメーションを機能させるには、BrowserAnimationsModuleをメインモジュールにインポートする必要があります
  • 最新バージョンでは、開発者は@angular/cdkをpackage.json（材料依存関係）に追加する必要があります
  • ドキュメントに記載されているように、BrowserModuleの後に常に材料モジュールをインポートします。

どちらの方法を使用する場合でも、インポート順序はNgModuleにとって重要なので、AngularのBrowserModuleの後にAngular Materialモジュールをインポートしてください。

6
Jota.Toledo

ステップ1

yarn add @angular/material @angular/cdk @angular/animations

ステップ2-すべてのマテリアルUIモジュールを含む新しいファイル（/myApp/src/app/material.module.ts）を作成します（ショートカットはありません。個々のモジュールを1つずつ含める必要があります）

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