Angular2のボタンをクリックすると警告ダイアログボックスが表示されます

Question

私はAngular2の初心者です。私はボタンをクリックするとYesとNoの2つのオプションを表示します。 yesオプションmain 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', 
 
    })

Answer 1

私もちょうど角度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; 
}