[解決済み] Angularで確認ダイアログを作る簡単な方法?
質問
アンギュラー2で確認ダイアログを作る、それほど複雑でない方法はありますか?アイデアは、アイテムをクリックして、その削除を確認するポップアップまたはモーダルを表示することです。 angular2-modal を試してみましたが、確認またはキャンセルしたときに何かを行うようにする方法がわかりません。 クリック機能は問題なく動作しますが、唯一の問題は、私はそれを使用する方法をよく知らないということです。私はまた、私が使用している違いと同じプラグインで別のモーダルを持っています。
this.modal.open(MyComponent);
そして、私は確認ボックスを表示するためだけに別のコンポーネントを作成したくないので、それが私が尋ねている理由です。
どのように解決するのですか?
方法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-bootstrap または ngx-ブートストラップ . コンポーネントをインストールするだけで、モーダルコンポーネントを使用することができます。
方法3
以下に、シンプルな確認ポップアップを実装する別の方法を示します。
angular2/material
を使った簡単な確認用ポップアップの実装です。
app.module.ts
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>
app.component.html
<button (click)="openConfirmationDialog()">Delete me</button>
app.component.ts
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">
関連
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか?
-
[解決済み] パイプ ' ' が見つかりません。
-
[解決済み] dataSource' は 'table' の既知のプロパティではないので、バインドできません。
-
[解決済み] ng2 - ng-containerタグとng-templateタグの違い
-
[解決済み] angular4 / typescriptでdocument.getElementByIdの置き換え?
-
[解決済み] Angular : ルートへの手動リダイレクト
-
[解決済み] Angular 2 - ルーティング - ObservableでCanActivateする。
-
[解決済み] Angular2 Tutorial (Tour of Heroes)です。モジュール 'angular2-in-memory-web-api' を見つけることができません。
-
[解決済み] Angular Material 2 ネストされたオブジェクトによるデータテーブルのソート
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 2におけるEventEmitter.next()とEventEmitter.emit()の相違点
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] Angular 2: 反応するフォームコントロールの反復処理
-
[解決済み] 角度2 ngfor 最初、最後、インデックスループ
-
[解決済み] Angular2でNgForがPipeでデータを更新しない。
-
[解決済み] プロパティ 'X' はプライベートであり、クラス 'xyzComponent' 内でのみアクセス可能です。
-
[解決済み] Reactive Forms - フィールドをタッチしたものとしてマークする
-
[解決済み] AngularでFormGroupに動的にaddControlを追加する
-
[解決済み] プロパティ 'controls' がタイプ 'AbstractControl' に存在しない Angular 4 [duplicate] 。
-
[解決済み] Angular2ルートでAngularの方法でパラメータを取得するには?