Angular 2进行确认对话框的简单方法

78

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

this.modal.open(MyComponent);

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

angular 
— 维克多·登科夫斯基
source
1
“简单的方法”是使用像您提到的angular2-modal之类的东西。否则，您将必须自己建立一个，而我可能不会这样称呼它为简单方法。您是否在提供的链接上看到有使用示例的示例：) embed.plnkr.co/mbPzd8
— AJT82
我知道，然后用带有2个按钮的确认弹出窗口创建一个组件是一个好主意，然后单击该按钮即可在主要组件中执行功能。在示例中，他使用键盘5关闭对话框，我需要关闭该对话框并调用一个函数。无论如何，我将尽我所能尽可能简单明了并发布结果
— Victor Dencowski
还有其他模态，它们可能具有您希望的其他内置功能，但是您的要求似乎并不难，所以我想很多都适合您，但是如果您喜欢，只需浏览在附近找到自己喜欢的一个。下面是一些示例：npmjs.com/search?q=angular+2+modal请尝试一下，如果遇到问题，请回到SO！编码愉快！:)
— AJT82

Answers:

177

方法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");
  }
}

方法二

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

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

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

确认对话框

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">
— 菲利普·约翰
source
1
我还必须从@ angular / platform-b​​rowser / animations导入BrowserAnimationsModule和从@ angular / material
— 导入
1
另外，对于风格我用@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';下面这个
— estellezg
1
一年后的今天，忘了添加解决方法。当前，我在一个大型项目中，我选择了matDialog，它非常完整，易于使用，但功能强大，并且为您提供了一种在主要组件和对话框之间进行通讯的简便方法，允许使用许多新选项。如果有人遇到这个问题，我建议您尝试一下，它需要进行一些准备，但是值得，因为它可以完美地工作
— victor dencowski 18'Feb 16'18
1
可以使用回叫功能吗？我没有尝试过代码，阅读它后，我仅看到一个静态类型的回调，例如，如果要进行动态调用（如按ID删除内容），则需要解析参数并在其中安装逻辑。
— KeaganFouche
1
+1。这是一个非常好的示例，几乎可以立即使用。最新的版本，只需更换md用mat，也许使用一些内置的样式按钮：mat-raised-button color="primary"
— 阿列克谢
36

您可以在函数内使用window.confirm与if条件结合使用

 delete(whatever:any){
    if(window.confirm('Are sure you want to delete this item ?')){
    //put your delete method logic here
   }
}

当您调用delete方法时，它将弹出一条确认消息，当您按OK时，它将执行if条件中的所有逻辑。

— 塔雷克·巴德（Tarek Badr）
source
17

我参加聚会很晚了，但这是另一个使用的实现 ng-bootstrap：https : //stackblitz.com/edit/angular-confirmation-dialog

确认对话框服务

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { ConfirmationDialogComponent } from './confirmation-dialog.component';

@Injectable()
export class ConfirmationDialogService {

  constructor(private modalService: NgbModal) { }

  public confirm(
    title: string,
    message: string,
    btnOkText: string = 'OK',
    btnCancelText: string = 'Cancel',
    dialogSize: 'sm'|'lg' = 'sm'): Promise<boolean> {
    const modalRef = this.modalService.open(ConfirmationDialogComponent, { size: dialogSize });
    modalRef.componentInstance.title = title;
    modalRef.componentInstance.message = message;
    modalRef.componentInstance.btnOkText = btnOkText;
    modalRef.componentInstance.btnCancelText = btnCancelText;

    return modalRef.result;
  }

}

确认对话框组件

import { Component, Input, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-confirmation-dialog',
  templateUrl: './confirmation-dialog.component.html',
  styleUrls: ['./confirmation-dialog.component.scss'],
})
export class ConfirmationDialogComponent implements OnInit {

  @Input() title: string;
  @Input() message: string;
  @Input() btnOkText: string;
  @Input() btnCancelText: string;

  constructor(private activeModal: NgbActiveModal) { }

  ngOnInit() {
  }

  public decline() {
    this.activeModal.close(false);
  }

  public accept() {
    this.activeModal.close(true);
  }

  public dismiss() {
    this.activeModal.dismiss();
  }

}

Confirmation-dialog.component.html

<div class="modal-header">
  <h4 class="modal-title">{{ title }}</h4>
    <button type="button" class="close" aria-label="Close" (click)="dismiss()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    {{ message }}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" (click)="decline()">{{ btnCancelText }}</button>
    <button type="button" class="btn btn-primary" (click)="accept()">{{ btnOkText }}</button>
  </div>

使用如下对话框：

public openConfirmationDialog() {
    this.confirmationDialogService.confirm('Please confirm..', 'Do you really want to ... ?')
    .then((confirmed) => console.log('User confirmed:', confirmed))
    .catch(() => console.log('User dismissed the dialog (e.g., by using ESC, clicking the cross icon, or clicking outside the dialog)'));
  }
— 提洛
source
我遵循了上面的代码，但是当我单击按钮时，弹出模式出现了几分之一秒并立即消失。您能帮我解决此问题吗？
— watraplion '18
链接的StackBlitz演示也会发生这种情况吗？
— tilo
不。在StackBlitz中，它的工作正常。我已将所有这些文件复制到我的项目模板中，我正面临这个问题
— watraplion
好吧，如果没有更多信息，很难调试（很难理解）。
— tilo
@tilo：看来它仅在Angular 5中可用。在Angular 4中不可用。更重要的是，它们已在更高版本的ng-bootstrap
— SK中
16

更新：添加了Plunkr

我在所有论坛上都在寻找解决方案，但没有找到，因此找到了具有Old School Javascript Callback功能的解决方案。这是创建确认对话框并为YES和NO单击事件设置回调函数的一种非常简单和干净的方法。
我已经使用了Bootstrap CSS for Modal和带有rxjs Subject的警报服务。

alert.component.html

        <div *ngIf="message.type == 'confirm'"  class="modal-body">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="text-center">{{message.text}}</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p class="text-center">
                        <a (click)="message.noFn()">
                            <button class="btn btn-pm">No</button>
                        </a>
                        <a (click)="message.siFn()">
                            <button  class="btn btn-sc" >Yes</button>
                        </a>
                    </p>
                </div>
            </div>
         </div>

alert.component.ts

export class AlertComponent {
    message: any;
    constructor(
      public router: Router, 
      private route: ActivatedRoute, 
      private alertService: AlertService,
   ) { }
   ngOnInit() {
    //this function waits for a message from alert service, it gets 
    //triggered when we call this from any other component
    this.alertService.getMessage().subscribe(message => {
        this.message = message;
    });
}

最重要的部分在这里alert.service.ts

     import { Injectable } from '@angular/core'; 
     import { Router, NavigationStart } from '@angular/router'; 
     import { Observable } from 'rxjs'; 
     import { Subject } from 'rxjs/Subject';
     @Injectable() export class AlertService {
          private subject = new Subject<any>();
          constructor(){}
          confirm(message: string,siFn:()=>void,noFn:()=>void){
            this.setConfirmation(message,siFn,noFn);
          }
          setConfirmation(message: string,siFn:()=>void,noFn:()=>void) {
            let that = this;
            this.subject.next({ type: "confirm",
                        text: message,
                        siFn:
                        function(){
                            that.subject.next(); //this will close the modal
                            siFn();
                        },
                        noFn:function(){
                            that.subject.next();
                            noFn();
                        }
                     });

                 }

          getMessage(): Observable<any> {
             return this.subject.asObservable();
          }
       }

从任何组件调用函数

this.alertService.confirm("You sure Bro?",function(){
    //ACTION: Do this If user says YES
},function(){
    //ACTION: Do this if user says NO
})

Plunkr https://embed.plnkr.co/vWBT2nWmtsXff0MXMKdd/

— 苏迪普·雷恩
source
嗨。我正在寻找类似的东西..但是上面的代码对我不起作用。未显示任何模式且console.tanks中没有错误
— mrapi
1
嗨，Mrpi，您可以确定是否已安装Bootstrap CSS吗？现在，如果您想测试Modal的外观，请删除ng-if并进行检查。
— Sudeep Rane
它的工作原理。谢谢。垂直居中放置什么？
— mrapi
1
您需要执行一些JS Calculation才能垂直进行，而不能仅通过CSS进行。但是对于水平边距：0自动工作就像一个魅力！
— Sudeep Rane
@NasiruddinSaiyed：您能告诉我要安装哪些模块。我得到警告：警告在./node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-i18n.js 32：39-56“出口‘getLocaleDayNames’中就没有‘@角/通用’
— SK。
7

您可以使用sweetalert：https ://sweetalert.js.org/guides/

npm install sweetalert --save

然后，只需将其导入到您的应用程序中：

import swal from 'sweetalert';

如果您传递两个参数，则第一个将是模式的标题，第二个将是其文本。

swal("Here's the title!", "...and here's the text!");
— 拉尔斯·罗达尔（LarsRødal）
source
4

使用javascript的本机确认功能和自定义Angular指令截然不同。它超级灵活且非常轻巧：

用法：

<button (hrsAreYouSure) (then)="confirm(arg1)" (else)="cancel(arg2)">
  This will execute confirm if user presses Ok on the confirmation dialog, or cancel if they
  hit Cancel
</button>

指示：

import {Directive, ElementRef, EventEmitter, Inject, OnInit, Output} from '@angular/core';

@Directive({
  selector: '[hrsAreYouSure]'
})

export class AreYouSureDirective implements OnInit {

  @Output() then = new EventEmitter<boolean>();
  @Output() else = new EventEmitter<boolean>();

  constructor(@Inject(ElementRef) private element: ElementRef) { }

  ngOnInit(): void {
    const directive = this;
    this.element.nativeElement.onclick = function() {
      const result = confirm('Are you sure?');
      if (result) {
        directive.then.emit(true);
      } else {
        directive.else.emit(true);
      }
    };
  }
}
— 克里斯·HG
source
1
由于一种方法的简单性和可重用性，这是我的首选方法。
— 马特·布鲁尔顿
Chrome要求我删除按钮hrsAreYouSure左右的括号，否则它将无法正常工作。
— 里德
另外，如果在对话框打开时按Enter键，则在确认是否是您的意图。
— 里德
2

在答案中添加更多选项。

你可以用 npm i sweetalert2

不要忘记将样式添加到您的 angular.json

"styles": [
         ...
          "node_modules/sweetalert2/src/sweetalert2.scss"
          ]

然后导入

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'


// CommonJS
const Swal = require('sweetalert2')

景气，您准备好了。

Swal.fire({
  title: 'Are you sure?',
  text: 'You will not be able to recover this imaginary file!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, keep it'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      'Deleted!',
      'Your imaginary file has been deleted.',
      'success'
    )
  // For more information about handling dismissals please visit
  // https://sweetalert2.github.io/#handling-dismissals
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    Swal.fire(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

有关此的更多信息：-https : //www.npmjs.com/package/sweetalert2

我希望这对某人有帮助。

谢谢。

— 安妮娜·席尔瓦（Anjana Silva）
source
@YuriWaki我很高兴它有所帮助:)
— Anjana Silva
1

为了在多模块应用程序中重用单个确认对话框实现，必须在单独的模块中实现该对话框。这是使用Material Design和FxFlex进行此操作的一种方法，尽管可以同时修剪或替换这两种方法。

首先共享模块（./app.module.ts）：

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {MatDialogModule, MatSelectModule} from '@angular/material';
import {ConfirmationDlgComponent} from './confirmation-dlg.component';
import {FlexLayoutModule} from '@angular/flex-layout';

@NgModule({
   imports: [
      CommonModule,
      FlexLayoutModule,
      MatDialogModule
   ],
   declarations: [
      ConfirmationDlgComponent
   ],
   exports: [
      ConfirmationDlgComponent
   ],
   entryComponents: [ConfirmationDlgComponent]
})

export class SharedModule {
}

和对话框组件（./confirmation-dlg.component.ts）：

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';

@Component({
   selector: 'app-confirmation-dlg',
   template: `
      <div fxLayoutAlign="space-around" class="title colors" mat-dialog-title>{{data.title}}</div>
      <div class="msg" mat-dialog-content>
         {{data.msg}}
      </div>
      <a href="#"></a>
      <mat-dialog-actions fxLayoutAlign="space-around">
         <button mat-button [mat-dialog-close]="false" class="colors">No</button>
         <button mat-button [mat-dialog-close]="true" class="colors">Yes</button>
      </mat-dialog-actions>`,
   styles: [`
      .title {font-size: large;}
      .msg {font-size: medium;}
      .colors {color: white; background-color: #3f51b5;}
      button {flex-basis: 60px;}
   `]
})
export class ConfirmationDlgComponent {
   constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}

然后我们可以在另一个模块中使用它：

import {FlexLayoutModule} from '@angular/flex-layout';
import {NgModule} from '@angular/core';
import {GeneralComponent} from './general/general.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {CommonModule} from '@angular/common';
import {MaterialModule} from '../../material.module';

@NgModule({
   declarations: [
      GeneralComponent
   ],
   imports: [
      FlexLayoutModule,
      MaterialModule,
      CommonModule,
      NgbModule.forRoot()
   ],
   providers: []
})
export class SystemAdminModule {}

组件的单击处理程序使用以下对话框：

import {Component} from '@angular/core';
import {ConfirmationDlgComponent} from '../../../shared/confirmation-dlg.component';
import {MatDialog} from '@angular/material';

@Component({
   selector: 'app-general',
   templateUrl: './general.component.html',
   styleUrls: ['./general.component.css']
})
export class GeneralComponent {

   constructor(private dialog: MatDialog) {}

   onWhateverClick() {
      const dlg = this.dialog.open(ConfirmationDlgComponent, {
         data: {title: 'Confirm Whatever', msg: 'Are you sure you want to whatever?'}
      });

      dlg.afterClosed().subscribe((whatever: boolean) => {
         if (whatever) {
            this.whatever();
         }
      });
   }

   whatever() {
      console.log('Do whatever');
   }
}

仅使用this.modal.open(MyComponent);as不会返回您可以订阅其事件的对象，这就是为什么您不能让它做某事的原因。此代码创建并打开一个对话框，我们可以预订其事件。

如果您修剪css和html，这确实是一个简单的组件，但是您自己编写可以控制它的设计和布局，而预编写的组件将需要更大的重量才能控制。

— 拉斯H
source
很好的答案，但我认为将组件放在单独的共享模块中会增加不必要的复杂性。
— 斯蒂芬·特纳
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.