ionic 给页面加一个蒙层

.html

 <div #mask class="shade" *ngIf="IsShowCover"></div>

 <div #mainbox>
    页面内容
    ...
 </div>

.css

ion-content{

 .shade{
    position: absolute;
    top: 0px;
    left: 0%;
    width: 100%;
    background-color: black;
    z-index:999;
    opacity: 0.3;
 }


}

.ts

  //初始化
  @ViewChild('mask', { static: false }) private mask: ElementRef;
  @ViewChild('mainbox', { static: false }) private mainbox: ElementRef;
  IsShowCover: boolean = false;


  constructor(){

  }


  //调用方法
  submit(){

    let params = {
      ...
    }

    this.api.submitCulturalPerception(params).then(
            (data: any) => {
                console.log('data', data);
                if (data.SUBMIT_STATUS == true) {
                    this.toast.createToast('提交成功', 2000);
                    setTimeout(() => {
                        //获取蒙层遮罩的高度
                        this.setMaskHeight();
                    }, 500);
                    this.IsShowCover = true;
                }
            },
            error => {
                console.log(error);
            }
        );

  }


 //获取页面内容高度赋值给蒙层遮罩的高度
    private setMaskHeight() {
        let hh = this.mainbox.nativeElement.offsetHeight;
        this.mask.nativeElement.style.height = hh + 'px';
    }