有没有一种方法可以检测用户是否查看了某个组件？

Question

在我的聊天应用程序中，我想用“已读”标志来标记消息。但是，只有组件处于活动状态（在初始化和销毁​​之间表示有效）并不意味着用户已经看到它。因为他可以在其他选项卡中浏览或最小化窗口等。

那么有什么通用的方法来检测角度中特定的分量是否显示在屏幕上并聚焦？

Answer 1

我终于找到了一个解决此问题的库： ngx-page-visibility

（支持Angular> = 6.x和rxjs> = 6.x）

这是一个简短的演示：

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

或者干脆做：

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

Answer 2

如果要检查是否检查/查看了子组件，请在子组件中使用 Angular Life Cycle Hooks 。

1. constructor()
2. ngOnChanges()
3. ngOnInit()
4. ngDoCheck()
5. ngAfterContentInit()
6. ngAfterContentChecked()
7. ngAfterViewInit()
8. ngAfterViewChecked() 。
9. ngOnDestroy()

根据您的情况使用上面突出显示的钩子。

请告诉我它是否无效。