Question

我需要从angular组件显示弹出对话框。例如，我想显示一个消息框，然后想要根据消息框中单击是，否，取消按钮获得用户的一些确认。我想根据用户点击的按钮执行操作。有人可以帮忙吗？我是网络开发和角色的新手。

Answer 1

您可以使用材质角度弹出窗口＆amp; modal，这是一个很好的例子：https://material.angular.io/components/dialog/examples;

您必须使用material或npm安装bower; for npm运行此命令：npm install '@angular/material' --save

然后您可以将必需品导入到您的组件中，如下所示：import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';

Answer 2

它显示带有确定和取消按钮的弹出消息。如果您想在单击“确定”按钮或“取消”按钮时执行任何操作。

import alertifyjs from 'alertifyjs';

showConfirmAlert(){
      alertifyjs.confirm('Are you sure want to cancel this transaction? You will lose any information entered.', 
      function (e) {
      if (e) {
      //Suppose you want to redirect to home page while click on OK Button
        window.location.href = "/home";
      }
      else
      {
      // code on clicking on cancel button
      }
  });}

<div class="col-3">
        <button (click)="showConfirmAlert()" class="btn btn-secondary btn-custom mr- 
        3">Button Name</button>
</div>

或者您也可以按照下面的另一个步骤进行操作

showConfirm(msg: any, onOkay: any, onCancel: any) {
alertifyjs.confirm('Confirm', msg, onOkay, onCancel).set('resizable', true);
}

showConfirmAlert(
this.showConfirm('Are you sure want to cancel this transaction? You will lose any information entered.',
  () => {
    //Suppose you want to redirect to home page while click on OK Button
    this.router.navigate(['/home']);
  },
  // code on clicking on cancel button
  () => { });
)

<div class="col-3">
    <button (click)="showConfirmAlert()" class="btn btn-secondary btn-custom 
    mr-3">Button Name</button>
</div>

以角度创建模态弹出对话框

2 个答案: