离子 2 - 属性绑定，使应用不可见

Question

我对离子有点菜鸟，所以这可能是一个愚蠢的问题。

按下按钮时，我想用黑色图像覆盖我的整个应用程序(或使所有内容不可见(，但按钮仍然在下面工作。

我的应用基于选项卡示例应用。

到目前为止，我已经尝试了以下方法

app.scss

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

我的标签.html

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

my-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 中演示了这一点(转到显示主页的第二个选项卡(

风格.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;
}

并在家里有这个.html

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

这个在家.ts

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

Answer 2

您可以进行绑定以使用角度指令动态呈现该部分。

检查此内容以进行干净实施：
嘎��