Question

我在类似于

的Angular组件的构造函数中实现了Visibility API

responseType

我需要暂停视频，即当Visibility更改为隐藏时调用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 }方法，我该怎么做？

Answer 1

我不知道为什么你说document.hidden在事件监听器中不起作用，因为它适用于我：

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

如果您遇到错误，可以打开开发工具（F12）并检查控制台吗？也许打破错误，看看有什么不对？

Answer 2

如果您使用Angular 4+，则可以使用模块角度页面可见性（https://www.npmjs.com/package/angular-page-visibility）。

以下是组件类的示例：

@Component( {
    selector : 'app-root',
    templateUrl : './app.component.html',
    styleUrls : [ './app.component.scss' ]
} )
export class AppComponent implements OnDestroy, OnInit {
    title = 'app';

    constructor() {
    }

    ngOnInit(): void {
    }

    @OnPageVisible()
    logWhenPageVisible(): void {
        console.log( 'OnPageVisible' );
        console.log( 'visible' );
    }

    @OnPageHidden()
    logWhenPageHidden(): void {
        console.log( 'OnPageHidden' );
        console.log( 'hidden' );
    }

    @OnPageVisibilityChange()
    logWhenPageVisibilityChange( isPageVisible: boolean ): void {
        console.log( 'OnPageVisibilityChange' );
        if ( isPageVisible ) {
            console.log( 'visible' );
        } else {
            console.log( 'hidden' );
        }
    }

    ngOnDestroy(): void {
    }
}

Answer 3

 @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事件。然后检查文档的状态以执行一种或多种方法。

在Angular中使用可见性API？

3 个答案: