イオン2 - アプリケーションを見えないようにするためのプロパティバインド

Question

私はこれがイオン性のものではないかと思います。

ボタンを押すと、アプリケーション全体が黒い画像でオーバーレイされます（またはすべてが非表示になります）が、下にボタンが表示されます。

私のアプリはタブサンプルアプリケーションに基づいています。

これまでのところ、私は、次の

app.scss

.dark-overlay { 
background-color: #000 !important; 
opacity: 1; 
} 

私-tab.html

<ion-content class="dark-overlay" (ng-hide)="showOverlay"> 
.... 
<div tappable (click)="stealthMode()"><img src="assets/img/stealthMode.png" width="100%" scroll="false"></div> 

私-tab.ts

stealthMode() { 
this.myElements = document.querySelectorAll("dark-overlay"); 
for (var i = 0; i < myElements.length; i++) { 
myElements[i].style.opacity = 0; 
} 
} 

を試してみました私がこれを働かせることができても、それは最終的には、app.scssの不透明度を0に設定すると、タブバーが表示されたままになりますが、黒くする必要があります。

私はプロパティバインディングに関連していると思います。

アイデア？あなたはイベントがあなたの暗いオーバーレイを通過させるためにポインタ・イベントを使用する必要が

おかげ

Answer 1

。家庭内 私はこのPlunkrにすることを実証した（2番目のタブに移動示しホームページ）

のstyle.css

.dark-overlay{ 
position:absolute; 
width:100%; 
height:100%; 
background-color:#888; 
opacity:0.9; 
top:0px; 
left:0px; 
z-index:1000; 
pointer-events: none; 
} 

とhome.html

<button (click)="stealthMode()">Tint</button> 
<div class="dark-overlay" [hidden]="showOverlay"></div> 

でこれを持っており、この.ts

showOverlay:boolean = false; 
    stealthMode(){ 
    this.showOverlay = !this.showOverlay; 
    } 

Answer 2

バインディングを作成してtha角度指令を使用して動的に調整します。
ngIF