ngOnDestroy 不会在页面重新加载时触发

Question

所以我正在努力提高我的角度技能，我目前正在论坛上工作。

我的想法是向用户显示当前有多少用户在线。当他们进入网站的论坛部分时，我会更新我的数据库以将一名成员添加到计数中，当他们离开时，它会从同一数据库中扣除一个。

当我将加一逻辑添加到 ngOnInit() 并将减一逻辑添加到 ngOnDestroy 时，我以为我已经明白了，但后来我注意到，当我用 f5 刷新页面时，ngOndestroy() 没有没有被解雇。结果是它不断将成员添加到成员计数中，即使它始终是同一个人查看页面。

当用户导航到我的 SPA 的另一部分以及刷新页面时，我如何确保计数减去一个？

我的代码：在 ngOnDestroy 中，我执行服务器请求以在数据库中扣除一个，然后取消订阅组件中的所有 observables

export class ForumCountComponent implements OnInit, OnDestroy{

    data;
    ngUnsubscribe = new Subject();

    constructor(private authService: AuthenticationService, private forumService: ForumService){

    }

    ngOnInit(){
        let loggedIn = this.authService.isLoggedIn();

        this.forumService.forumCountPlus(loggedIn)
            .takeUntil(this.ngUnsubscribe)
            .subscribe((data) => {
                this.data = data;
                console.log(data);
            })
    }

    ngOnDestroy(){
        let loggedIn = this.authService.isLoggedIn();

        this.forumService.forumCountMin(loggedIn)
            .takeUntil(this.ngUnsubscribe)
            .subscribe((data) => {
                this.data = data;
                this.ngUnsubscribe.next();
                this.ngUnsubscribe.complete();
            })
    }

Answer 1

ngOnDestroy 仅在组件在 Angular 工作流中被销毁时触发。但是，刷新页面不在工作流范围内，因此不会触发此方法。要在用户离开/刷新页面时处理操作，您需要使用onbeforeunload。

ngOnInit(){
    let loggedIn = this.authService.isLoggedIn();

    this.forumService.forumCountPlus(loggedIn)
        .takeUntil(this.ngUnsubscribe)
        .subscribe((data) => {
            this.data = data;
            console.log(data);
        })

    window.onbeforeunload = () => this.ngOnDestroy();
}

ngOnDestroy(){
    let loggedIn = this.authService.isLoggedIn();

    this.forumService.forumCountMin(loggedIn)
        .takeUntil(this.ngUnsubscribe)
        .subscribe((data) => {
            this.data = data;
            this.ngUnsubscribe.next();
            this.ngUnsubscribe.complete();
        })
}