Angular 2进行确认对话框的简单方法 [英] Angular 2 easy way to make a confirmation dialog

问题描述

有没有那么复杂的方法可以在角度2中进行确认对话框，这个想法是单击一个项目，然后显示一个弹出窗口或模态以确认其删除，我从这里尝试了角度2模态 angular2-modal ，但是如果您确认或取消它，它不知道怎么做. 单击功能工作正常，唯一的问题是我不太清楚如何使用它.我也有另一个具有相同插件的模态，与我使用的不同.

Is there any not-so-complicated way to make a confirm dialog in angular 2, the idea is to click on an item and then show a popup or modal to confirm its deletion, I tried angular 2 modals from here angular2-modal, but I don't know how to make that if you confirm or cancel it does something. the click function works fine, the only problem is that I don't know too well how to use it. I also have another modal with the same plugin with the difference that I use.

this.modal.open(MyComponent);

我不想创建另一个组件只是为了显示确认框，这就是我要问的原因.

And I don't want to create another component just for show a confirmation box that's why I'm asking.

推荐答案

方法1

一种简单的确认方法是使用本机浏览器确认警报. 该模板可以具有按钮或链接.

One simple way to confirm is to use the native browser confirm alert. The template can have a button or link.

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

component方法可以如下所示.

And the component method can be something like below.

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

方法2

获得简单确认对话框的另一种方法是使用有角引导程序组件，例如 ng-bootstrap 或 ngx-bootstrap .您可以简单地安装该组件并使用模式组件.

Another way to get a simple confirmation dialog is to use the angular bootstrap components like ng-bootstrap or ngx-bootstrap. You can simply install the component and use the modal component.

1. 使用ng-bootstrap的模态示例
2. 使用ngx-bootstrap的模态示例.
li>

1. Examples of modals using ng-bootstrap
2. Examples of modals using ngx-bootstrap.

方法3

下面提供的是使用我在项目中实现的angular2/material实现简单确认弹出窗口的另一种方法.

Provided below is another way to implement a simple confirmation popup using angular2/material that I implemented in my project.

app.module.ts

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

confirmation-dialog.ts

confirmation-dialog.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;
}

confirmation-dialog.html

confirmation-dialog.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

app.component.html

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

app.component.ts

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 =>在样式表之后添加了

index.html => added following stylesheet

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

这篇关于Angular 2进行确认对话框的简单方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！