在Angular中使用可见性API？

Question

我已经在类似于此的Angular组件的构造函数中实现了Visibility API

constructor() {
    var hidden, state, visibilityChange;
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
        state = "visibilityState";
    }

    document.addEventListener(visibilityChange, function() {
        if(status == hidden){
            console.log("Hidden");
        }
        else if(status != hidden){
            console.log("Visible");
        }
    }, false);
}

pauseVideo(){
    //Video pause code
}

我需要暂停视频，即pauseVideo()在“可见性”更改为“隐藏”时调用该方法，该怎么办？

Answer 1

 @Component( {
        selector : 'app-root',
        templateUrl : './app.component.html',
        styleUrls : [ './app.component.scss' ]
    } )

    export class AppComponent implements OnDestroy, OnInit { 
    constructor() {
    }

         @HostListener('document:visibilitychange', ['$event'])
          visibilitychange() {
            this.checkHiddenDocument();
          }

            checkHiddenDocument(){
            if (document.hidden){
            this.pauseVideo();
            } else {
            this.playVideo();
            }

        }

       ngOnDestroy(): void {
        }
    }

您可以使用一个 hostlistener 来处理visibilityChange 事件。然后检查文档的状态以执行一种方法或其他方法。

Answer 2

我不知道您为什么说document.hidden在事件监听器中不起作用，因为它对我来说很好：

document.addEventListener(
  "visibilitychange"
  , () => { 
    if (document.hidden) { 
      console.log("document is hidden");
    }else{
      console.log("document is showing");
    }
  }
);

如果您有各种错误，可以打开开发工具（F12）并检查控制台吗？也许打破错误，看看出了什么问题？