单击Angular2中的按钮后打开警报对话框答案

【问题标题】：Open alert dialog box after clicking on button in Angular2单击Angular2中的按钮后打开警报对话框
【发布时间】：2017-08-16 03:53:09
【问题描述】：

我是 Angular2 的初学者，我想在单击按钮时显示弹出窗口，其中包含两个选项是和否。当单击是选项主 div 隐藏并单击无选项后，对话框应该隐藏。

这里是示例代码。

index.html

<div id="main">
<button type="button">Click Me!</button>

</div>




hello.component.ts

import {Component, View} from "angular2/core";

@Component({
  selector: 'my-app',
  templateUrl: './index.html',
  })

【问题讨论】：

标签： angular

【解决方案1】：

我也刚刚开始学习 Angular 2... 并且还开始使用 StackOverflow。但我相信沿着这些路线的东西会起作用。另外，我只是徒手写的，如果我的语法不是 100% 准确，请原谅。

<div id="main" *ngIf="displayMain">
    <button type="button" (click)="OpenConfirm">Click Me!</button>

</div>


<div id="confirmBox" [class.visible]="DisplayDialogBox">
    <div class="message"></div>
    <button (click)="ClickYes">Yes</button>
    <button (click)="ClickNo">No</button>
</div>

处理组件中的点击事件：

@Component({
  selector: 'my-app',
  templateUrl: './index.html',
})
export class MyApplicationComponent{
    displayConfirmBox = false;
    displayMain = true;

    OpenConfirm(){
       this.displayConfirmBox = true;
    }

    ClickYes(){
       this.displayMain=false;
    }

    ClickNo(){
       this.DisplayDialogBox = false;
    }

}

CSS

 #confirmBox{
    top: 30%;
    left: 30%;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 30%;
    position: fixed;
    transition: all .5s ease-in-out;
    border:1px solid black;
    opacity:0;
}

#confirmBox.visible{  
    opacity:1;  
}
#confirmBox .message{
    width:100%;
    text-align:center;
    margin-bottom:10px;
    font-size:24px;
}

#confirmBox button{
    width:80px;
}
#confirmBox button:first-child{
    float:left;
}
#confirmBox button:last-child{
    float:right;
}

【讨论】：

不，它不会创建弹出对话框。
编辑代码并添加 CSS 以使确认框显示为弹出窗口
重温了这篇旧帖子...在 StackBlitz 中构建。修复了几个语法问题（正如我注意到的那样，我在手机 IIRC 上输入它时可能存在），它似乎符合您的要求。感谢StackBlitz example 的反对