javascript - ngOnDestroy 未在页面重新加载时触发

Question

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

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

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

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

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

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();
        })
}