Question

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

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

我的应用基于标签示例应用。

到目前为止，我已尝试过以下

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>

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中展示了（转到显示主页的第二个标签页）

的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>

这在home.ts

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

Answer 2

您可以使用angular指令动态渲染该部分。

检查这是否干净实施：
ngIF

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

2 个答案: