properties - Ionic 2 - 属性绑定(bind)使应用程序不可见

Question

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

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

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

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

app.scss

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

my-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 仍然会使选项卡栏可见，但我也需要它变黑。

我认为这与属性绑定(bind)有关。

有什么想法吗？

谢谢

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

并将其放入 home.html

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

这个在 home.ts

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