☰

Angularで確認ダイアログを作成する簡単な方法は？質問する

tag-icon • tag-icon angular confirmation
Angularで確認ダイアログを作成する簡単な方法は？質問する

Angular 2で確認ダイアログを作成するそれほど複雑ではない方法はありますか？アイデアは、アイテムをクリックしてからポップアップまたはモーダルを表示して削除を確認することです。ここからAngular 2モーダルを試しました。角度2モーダルしかし、確認またはキャンセルした場合に何かが行われるようにする方法がわかりません。クリック機能は正常に動作しますが、唯一の問題は、その使用方法がよくわからないことです。同じプラグインを使用した別のモーダルもありますが、私が使用しているものとは異なります。

this.modal.open(MyComponent);

確認ボックスを表示するためだけに別のコンポーネントを作成したくないので、質問しています。

ベストアンサー1

方法1

確認する簡単な方法の 1 つは、ネイティブ ブラウザーの確認アラートを使用することです。テンプレートにはボタンまたはリンクを含めることができます。

<button type=button class="btn btn-primary"  (click)="clickMethod('name')">Delete me</button>

コンポーネントメソッドは以下のようになります。

clickMethod(name: string) {
  if(confirm("Are you sure to delete "+name)) {
    console.log("Implement delete functionality here");
  }
}

方法2

シンプルな確認ダイアログを表示する別の方法は、次のようなAngular Bootstrapコンポーネントを使用することです。ng-ブートストラップまたはngxブートストラップコンポーネントをインストールするだけで、モーダル コンポーネントを使用できます。

  1. ng-bootstrap を使用したモーダルの例
  2. ngx-bootstrap を使用したモーダルの例。

方法3

angular2/material以下に、私のプロジェクトで実装したものを使用して、簡単な確認ポップアップを実装する別の方法を示します。

アプリモジュール

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ConfirmationDialog } from './confirm-dialog/confirmation-dialog';

@NgModule({
  imports: [
    ...
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    ...
    ConfirmationDialog
  ],
  providers: [ ... ],
  bootstrap: [ AppComponent ],
  entryComponents: [ConfirmationDialog]
})
export class AppModule { }

確認ダイアログ.ts

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

@Component({
  selector: 'confirm-dialog',
  templateUrl: '/app/confirm-dialog/confirmation-dialog.html',
})
export class ConfirmationDialog {
  constructor(public dialogRef: MdDialogRef<ConfirmationDialog>) {}

  public confirmMessage:string;
}

確認ダイアログ.html

<h1 md-dialog-title>Confirm</h1>
<div md-dialog-content>{{confirmMessage}}</div>
<div md-dialog-actions>
  <button md-button style="color: #fff;background-color: #153961;" (click)="dialogRef.close(true)">Confirm</button>
  <button md-button (click)="dialogRef.close(false)">Cancel</button>
</div>

アプリコンポーネント

<button (click)="openConfirmationDialog()">Delete me</button>

アプリコンポーネント

import { MdDialog, MdDialogRef } from '@angular/material';
import { ConfirmationDialog } from './confirm-dialog/confirmation-dialog';

@Component({
  moduleId: module.id,
  templateUrl: '/app/app.component.html',
  styleUrls: ['/app/main.css']
})

export class AppComponent implements AfterViewInit {
  dialogRef: MdDialogRef<ConfirmationDialog>;

  constructor(public dialog: MdDialog) {}

  openConfirmationDialog() {
    this.dialogRef = this.dialog.open(ConfirmationDialog, {
      disableClose: false
    });
    this.dialogRef.componentInstance.confirmMessage = "Are you sure you want to delete?"

    this.dialogRef.afterClosed().subscribe(result => {
      if(result) {
        // do confirmation actions
      }
      this.dialogRef = null;
    });
  }
}

index.html => 次のスタイルシートを追加しました

<link rel="stylesheet" href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css">

おすすめ記事