标签: confirm-dialog

在我的Angular 4应用程序中,我们假设我在服务中.

在某些时候,我想要求用户进行确认,目前我只是在做一个confirm(...)请求:

const result = confirm('Are you sure?');

如果相反我想显示一个ngx-bootstrap 模态,比方说,两个按钮"是"或"否",并获得类似的结果？

编辑:在我的情况下,我通过玩主题解决了我的问题.在这里,您可以找到我的解决方案,以防它对其他人有用.然而,该解决方案并没有解决这个问题,即从模态返回一个值,所以我把它打开.

如何在angularjs中的下方按钮中应用确认对话框？

<button class="btn btn-sm btn-danger" ng-click="removeUser($index)">Delete</button>

像这样.

<span><a class="button" onclick="return confirm('Are you sure to delete this record ?')" href="delete/{{ item.id }}">Delete</span>

更新

目前我这样做

    function removeUser(index) {
      var isConfirmed = confirm("Are you sure to delete this record ?");
      if(isConfirmed){
        vm.users.splice(index, 1);
      }else{
        return false;
      }
    };

在我的Angular 4应用程序中,我有一些带有表单的组件,如下所示:

export class MyComponent implements OnInit, FormComponent {

  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({...});
  }

他们使用Guard服务来防止未提交的更改丢失,因此如果用户在请求确认之前尝试更改路由:

import { CanDeactivate } from '@angular/router';
import { FormGroup } from '@angular/forms';

export interface FormComponent {
  form: FormGroup;
}

export class UnsavedChangesGuardService implements CanDeactivate<FormComponent> {
  canDeactivate(component: FormComponent) {
    if (component.form.dirty) {
      return confirm(
        'The form has not been submitted yet, do you really want to leave page?'
      );
    }

    return true;
  }
}

这是使用一个简单的confirm(...)对话框,它工作得很好.

但是我想用更花哨的模态对话框替换这个简单的对话框,例如使用ngx-bootstrap Modal.

如何使用模态来实现相同的结果？

我正在寻找一种方法来实现与JQuery可重用的"确认"对话框..

这是MyApp类打开对话框的部分:

/**
 * @param text string Message to display
 */
getConfirmationDialog: function(text) {
   MyApp.confirmDialog = $('<div><p>' + text + '</p></div>');
   MyApp.confirmDialog
    .dialog({
        modal: true,
        autoOpen: false,
        title: 'Please confirm',
        width: 300,
        height: 180,
        buttons: {
            'OK': function() {
                return true;
            },
            Cancel: function() {
                $(this).dialog('close');
                return false;
            }
        }
    });

    MyApp.confirmDialog.dialog('open');
},

在另一个班级我做:

/**
 * Clear system cache
 *
 * @param url string Backend URL
 */
clearCache: function(url) {

    dialog = MyApp.getConfirmationDialog('Clear cache?');

    //dialog returns true..
    if (dialog) { …