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

【问题标题】：Create a modal popup dialog in angular以角度创建模态弹出对话框
【发布时间】：2018-02-21 23:58:15
【问题描述】：

我需要从角度组件显示弹出对话框。例如，我想显示一个消息框，然后希望通过单击消息框中的“是”、“否”、“取消”按钮来获得用户的确认。我想根据用户单击的按钮执行操作。有人可以帮忙吗？我是 Web 开发和 Angular 的新手。

【问题讨论】：

能否请您发布一些代码
您可以使用简单的引导弹出窗口或 NG2BS3 模态。您将在 Internet 上获得大量示例。
使用 Sweetalert2 获取角度：npmjs.com/package/sweetalert2

标签： javascript twitter-bootstrap angular angular-material ng-bootstrap

【解决方案1】：

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

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

然后您可以像这样将必需品导入您的组件：import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';

【讨论】：

【解决方案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>

【讨论】：

对不起。我忘了。