在 angular 中创建模态弹出对话框

Question

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

Answer 1

您可以使用 material angular 弹出窗口和模式，这里是很好的例子：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';

Answer 2

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

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>

在 angular 中创建模态弹出对话框

Create a modal popup dialog in angular

javascript

twitter-bootstrap

angular-material

ng-bootstrap

angular