Angular Service类变量实例化值丢失问题排查与解决

这个报错的核心是JavaScript事件回调的this上下文丢失问题：

• 直接把类方法this.handleVisibilityChange作为回调传给addEventListener时，事件触发后回调内部的this会被自动绑定到触发事件的DOM对象（也就是document），而非PageVisibilityService服务实例
• 此时回调里访问的this.doc、this._pageVisibilityStateSubject根本不是服务实例上的属性，自然会抛出undefined、null相关的读取错误
• 提到的把实例存入sessionStorage的方案完全不可行：sessionStorage只能存储序列化后的字符串，无法保存活的服务实例引用，不要往这个方向实现。

Angular中实现页面可见性监听不需要组件手动传入document、手动调用初始化方法，用官方提供的DOCUMENT注入令牌可以直接拿到document对象，服务初始化时自动绑定事件、销毁时自动解绑，从根源上避免上下文丢失和内存泄漏问题。

修正后的服务代码 #

import { Subject } from "rxjs";
import { Injectable, Inject, OnDestroy } from '@angular/core';
import { DOCUMENT } from '@angular/common';

export enum PageVisibilityState {
    Visible,
    Hidden
}

// 直接声明为全局单例服务，不需要在模块providers中重复注册
@Injectable({ providedIn: 'root' })
export class PageVisibilityService implements OnDestroy {    
    private readonly doc: Document;
    private hiddenString: string = "";
    private visibilityChange: string = ""; 
    private readonly _pageVisibilityState$ = new Subject<PageVisibilityState>();
    // 对外只暴露只读可观察对象，防止外部误调用next篡改状态
    public readonly pageVisibilityState$ = this._pageVisibilityState$.asObservable();

    constructor(@Inject(DOCUMENT) doc: Document) {
        this.doc = doc;
        this.initVisibilityListener();
    }

    private initVisibilityListener() {
        // 探测浏览器支持的Page Visibility API前缀
        if (typeof this.doc.hidden !== "undefined") {
            this.hiddenString = "hidden";
            this.visibilityChange = "visibilitychange";
        } else if (typeof (this.doc as any)["mozHidden"] !== "undefined") {
            this.hiddenString = "mozHidden";
            this.visibilityChange = "mozvisibilitychange";
        } else if (typeof (this.doc as any)["webkitHidden"] !== "undefined") {
            this.hiddenString = "webkitHidden";
            this.visibilityChange = "webkitvisibilitychange";
        } else {
            console.warn("Current browser does not support Page Visibility API");
            return;
        }

        // 绑定箭头函数形式的回调，固定this指向服务实例
        this.doc.addEventListener(this.visibilityChange, this.handleVisibilityChange, false);
        // 初始化时主动推送一次当前页面状态
        this.handleVisibilityChange();
    }

    // 用箭头函数定义类方法，从根本上固定this指向，不会随调用方变化
    private readonly handleVisibilityChange = () => {
        const isHidden = !!(this.doc as any)[this.hiddenString];
        this._pageVisibilityState$.next(isHidden ? PageVisibilityState.Hidden : PageVisibilityState.Visible);
    }

    ngOnDestroy(): void {
        // 服务销毁时移除事件监听，避免内存泄漏
        if (this.visibilityChange) {
            this.doc.removeEventListener(this.visibilityChange, this.handleVisibilityChange, false);
        }
        this._pageVisibilityState$.complete();
    }
}

核心修复点：将事件回调定义为箭头函数类属性，箭头函数没有独立的this上下文，会直接继承定义位置的this（也就是服务实例本身），彻底解决回调执行时上下文丢失的问题。

修正后的组件调用代码 #

不需要在构造函数里手动调用init方法，直接注入服务订阅状态即可，记得在组件销毁时取消订阅避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { PageVisibilityService, PageVisibilityState } from '../../../shared/services/page.visibility.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-team-consult-action-teamConsult',
  templateUrl: './team-consult-action.component.html',
  styleUrls: ['./team-consult-action.component.scss']
})
export class TeamConsultActionComponent implements OnInit, OnDestroy {
    private readonly destroy$ = new Subject<void>();

    constructor(private readonly pageVisibilityService: PageVisibilityService) {}

    ngOnInit(): void {
        this.pageVisibilityService.pageVisibilityState$
            .pipe(takeUntil(this.destroy$))
            .subscribe((pageVisible: PageVisibilityState) => {
                console.log(`Current Page State is ${pageVisible === PageVisibilityState.Visible ? "Visible" : "Hidden"}`);
            });
    }

    ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }
}

临时快速修复方案 #

如果暂时不想重构现有服务，只需要修改事件绑定的代码，手动给回调绑定服务实例上下文即可解决报错：

// 原错误写法
// doc.addEventListener(this.visibilityChange, this.handleVisibilityChange, false);
// 替换为以下任意一种写法即可
// 写法1：用bind绑定this
doc.addEventListener(this.visibilityChange, this.handleVisibilityChange.bind(this), false);
// 写法2：用箭头函数包裹回调
doc.addEventListener(this.visibilityChange, () => this.handleVisibilityChange(), false);

注意这种写法需要单独保存回调函数的引用，在dispose方法中调用removeEventListener解绑，否则会造成内存泄漏，长期使用还是建议采用前面的规范实现。

内容的提问来源于stack exchange，提问作者Hemant