Question

我是Angular2的初学者，我想在按钮点击时显示pop和两个选项Yes和No。单击yes选项主div隐藏，单击No options后，对话框应隐藏。

以下是示例代码。

＆＃13;

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',
  })

＆＃13;

Answer 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;
}

单击Angular2中的按钮后打开警告对话框

1 个答案: