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

Question

所以我正在努力提高我的角度技能,我目前正在一个论坛上工作.

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

当我向ngOnInit()和ngOnDestroy中添加了一个加号的逻辑时,我想我已经想到了这一切,但后来我注意到当我用f5刷新页面时ngOndestroy()没有被触发.结果是它不断向成员计数添加成员,即使它始终是查看页面的同一个人.

当该人导航到我的SPA的另一部分并刷新页面时,如何确保计数扣除一个？

我的代码:在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仅在角度工作流程内销毁组件时触发.但是,刷新页面不在工作流程中,因此不会触发此方法.要在用户离开/刷新页面时处理操作,您需要使用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();
        })
}