Angularマテリアルとのダイアログ

提供:Dev Guides
移動先:案内検索

利用可能なコンポーネントの多くをAngularMaterialで調べましたが、ダイアログは他のほとんどのAngular Materialコンポーネントよりもセットアップに少し複雑であるため、省略されました。 したがって、ダイアログには独自の投稿があります。

絵文字を選択できる簡単なダイアログを実装します。 ダイアログを調整するコンポーネントは、ユーザーの選択を取り戻します。

まず、プロジェクトに対して Angular Materialsetupが正しく設定されていることを確認する必要があります。 また、ここでは、 AngularCLIで開始されたプロジェクトがあることも前提としています。

ダイアログのコンポーネント

Angular Materialを使用すると、ダイアログは個別のコンポーネントになるため、最初のステップはダイアログのコンポーネントを作成することです。 Angular CLIを使用すると、次のようなことができます。

$ ng g component choose-emoji-dialog

ダイアログコンポーネントをインポートする

次に、ダイアログコンポーネントをアプリモジュールとダイアログを呼び出すコンポーネントにインポートします。 アプリモジュールでは、コンポーネントを宣言およびentryComponentsにも追加します。

アプリモジュール:app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { ChooseEmojiDialogComponent } from './choose-emoji-dialog/choose-emoji-dialog.component';

MdDialogのインポートと挿入

メインのアプリコンポーネントであるダイアログを呼び出すコンポーネントでは、 MdDialog もインポートして、クラスコンストラクターに挿入します。

app.component.ts

import { Component } from '@angular/core';
import { ChooseEmojiDialogComponent }
  from './choose-emoji-dialog/choose-emoji-dialog.component';
import { MdDialog } from '@angular/material';

@Component({
  selector: 'app-root',
  template: <h1>Your Emoji</h1>
    <div *ngIf="selectedEmoji">{{ selectedEmoji }}</div>
    <button mat-raised-button (click)="openEmojiDialog()">
      Make a selection
    </button>,
  styles: [div {
    padding: 1rem;
  }]
})
export class AppComponent {
  selectedEmoji: string;
  constructor(public dialog: MdDialog) {}
  openEmojiDialog() {
    let dialog = this.dialog.open(ChooseEmojiDialogComponent);
dialog.afterClosed()
  .subscribe(selection => {
    if (selection) {
      this.selectedEmoji = selection;
    } else {
      // User clicked 'Cancel' or clicked outside the dialog
    }
  });

注意すべきいくつかのこと:

  • 挿入されたMdDialogインスタンスでopenを呼び出し、ダイアログコンポーネントを渡すことで、ダイアログを開きます。
  • afterClosed が返すオブザーバブルをサブスクライブしてデータを抽出することにより、ダイアログから返されたデータを取得します。

ダイアログコンポーネント

ダイアログコンポーネントは非常に単純であり、AngularMaterialはダイアログ要素のスタイル設定に役立ついくつかのディレクティブを提供します。 テンプレートのマークアップは次のとおりです。

Choose-emoji-dialog.html

<h1 mat-dialog-title>Choose Your Destiny:</h1>

<div mat-dialog-content>
  <mat-select [(ngModel)]="choosenEmoji">
    <mat-option *ngFor="let emoji of emojis" [value]="emoji">
      {{ emoji }}
    </mat-option>
  </mat-select>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="confirmSelection()" color="primary">
    Okays!
  </button>
  <button mat-button (click)="dialogRef.close()">
    Cancel
  </button>
</div>

使用されているいくつかの特別なディレクティブに注意してください: mat-dialog-title mat-dialog-content 、およびmat-dialog-actions



ダイアログのアクションボタンを正しく機能させるには、 MdDialogRef をインポートし、コンストラクターに挿入して、ダイアログへの参照を作成する必要があります。

Choose-emoji-dialog.component.ts

import { Component } from '@angular/core';
import { MdDialogRef } from '@angular/material';

@Component({
  selector: 'app-choose-emoji-dialog',
  templateUrl: './choose-emoji-dialog.component.html'
})
export class ChooseEmojiDialogComponent {
  emojis = ['🐼', '💪', '🐷', '🤖', '👽', '🐥'];
  choosenEmoji: string;
  constructor(public dialogRef: MdDialogRef<ChooseEmojiDialogComponent>) { }
  confirmSelection() {
    this.dialogRef.close(this.choosenEmoji);
  }

confirmSelection メソッドはダイアログを閉じますが、必要なデータも返します。

これで、かなりのマテリアルデザインダイアログができました🎉🐷