在Angular中使用可见性API？

问题描述：

我已经实现可见性API的角度成分类似于本在Angular中使用可见性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()方法的构造，我该怎么做这里面？

你可以用'如果（document.hidden）{'，看看是否该文件是可见或不可见。 – HMR

我确实使用过'if（document.hidden）'，但该方法无法在文档事件侦听器内部访问，我搜索了更多，并且答案是在发生这种情况时使用服务来广播事件;有关它的任何想法？ – Nithin

答

我不知道为什么你说document.hidden的事件监听器不工作，因为它工作得很好，对我来说：

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

如果您各种各样的错误可能打开开发者工具（F12 ）并检查控制台？也许打破了错误，看看有什么不对？

嘿，谢谢你的代码。这工作。 – Nithin

答

如果您使用Angular 4+，则可以使用Module angular-page-visibility（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 { 
    } 
}

在Angular中使用可见性API？

相关推荐