web-dev-qa-db-ja.com

マテリアルに簡単なアラートダイアログを表示Angular

私はMaterial Angular（from Angular Material ）を使用しています。サイト内の例は少し複雑すぎて、インターネットの他のすべてのチュートリアルは古くなっているか、代わりにAngularJSを使用している場合、タイトル、メッセージ、確認/キャンセルボタンを含む簡単なアラート（AndroidのAlertDialogと同様）を表示するにはどうすればよいですか。

angulartypescriptmaterial-designsingle-page-applicationangular-material2
6
Washington A. Ramos

[〜＃〜] edit [〜＃〜]：

コンポーネントのHTMLファイル（またはより一般的には「コンポーネントビュー」と呼ばれる）でテンプレート参照を使用し、コンポーネントのTypeScriptファイルで参照し、その参照をMatDialog#openに渡すこともできます。

または、コンポーネントのビューでテンプレートの参照にアクセスし、参照を受け入れる定義したメソッドに渡すことができます。

入力した内容と混同される場合は、以下のコードを確認してください（最初のダイアログは最初の文を示し、2番目のダイアログは2番目の文で説明した内容を示しています）

（次の構造をもう一度仮定します）

app/
  app.component.html
  app.component.ts

app.component.html：

<button mat-button (click)="openDialogWithRef(firstDialog)">Open dialog with reference</button>
<button mat-button (click)="openOtherDialog()">Open dialog in code</button>

<ng-template #firstDialog>
  <h2 matDialogTitle>Hello, world!</h2>
  <p matDialogContent><em>Content for this dialog goes here...</em></p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>
</ng-template>

<ng-template #secondDialog>
  <h2 matDialogTitle>Hello, second dialog!</h2>
  <p matDialogContent>Interesting note: This template reference was referenced in code with the <code>@ViewChild</code>, which lets you query components/template references in the component view.</p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>

app.component.ts（短縮）：

import { ViewChild, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

// ...
export class AppComponent {
  @ViewChild('secondDialog') secondDialog: TemplateRef<any>;

  constructor(private dialog: MatDialog) { }

  openDialogWithRef(ref: TemplateRef<any>) {
    this.dialog.open(ref);
  }

  openOtherDialog() {
    this.dialog.open(this.secondDialog);
  }
}

このメソッドを使用すると、ダイアログ用の新しいコンポーネントを作成するだけでなく、モジュールのentryComponentsでそれらを宣言する手間を省くことができます。

ただし、単一のコンポーネントビューに複数のダイアログテンプレートがある場合、これはすぐに面倒になります。

元の答え

リクエストしたとおりの簡単な例を次に示します。

（次の構造を想定）

app/
  my-alert-dialog/
    my-alert-dialog.component.html
    my-alert-dialog.component.ts
  app.component.ts
  app.module.ts

my-alert-dialog.component.html

<h2 matDialogTitle>Unregister?</h2>
<mat-dialog-content>
  <p>When you unregister, all your data will be removed. Continue?</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <!--
    Note that you can pass in anything to the `matDialogClose` attribute. This also includes objects, arrays, etc.
    Just make sure that you make it a property binding with those [] brackets
    Example: <button mat-button [matDialogClose]="{'lol': true}">Cancel</button>
  -->
  <button mat-button matDialogClose="cancel" color="primary">Cancel</button>
  <button mat-button matDialogClose="confirm" color="warn">Unregister</button>
</mat-dialog-actions>

上記のコードの説明：

  • [matDialogTitle]/[mat-dialog-title]：ダイアログのタイトルを示すためのディレクティブ（通常、h2要素で使用）。
  • [matDialogContent]/[mat-dialog-content]/mat-dialog-content：ダイアログのコンテンツを示すディレクティブ。
  • [matDialogActions]/[mat-dialog-actions]/mat-dialog-actions：ダイアログのアクションを示すディレクティブ。
  • [matDialogClose]/[mat-dialog-close]：この要素をクリックしたときにダイアログを閉じることを示すディレクティブ（通常、button要素で使用）。オプションで、このディレクティブには（anyタイプの）パラメーターを含めることができ、このパラメーターをこのダイアログを開いたコンポーネントに渡すことができます。

my-alert-dialog.component.ts

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

@Component({
  selector: 'app-alert-dialog', // Replace with your own selector
  templateUrl: './my-alert-dialog.component.html'
})
export class MyAlertDialogComponent { }

app.component.ts（編集済み）

import { MatDialog } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';
// ...
export class AppComponent {
  constructor(private dialog: MatDialog) { }
  unregister() {
    let dialogRef = this.dialog.open(MyAlertDialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      // NOTE: The result can also be nothing if the user presses the `esc` key or clicks outside the dialog
      if (result == 'confirm') {
        console.log('Unregistered');
      }
    })
  }
}

app.module.ts（編集済み）

import { MatDialogModule } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';

@NgModule({
  declarations: [
    // ...
    MyAlertDialogComponent
  ],
  imports: [
    // ...
    MatDialogModule
  ],
  entryComponents: [
    // See https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code- for more info
    MyAlertDialogComponent
  ]
})
export class AppModule { }

デモ

10
Edric