Question

所以我在一个论坛上工作，这个论坛的一部分是我计算当前在线人数（注册和访客）的部分。当人们进入论坛时，我激活ngOninit（）中的代码，将1加到数据库中的文档中，该文档计算了当前使用该论坛的人数。当我离开论坛时，它会激活ngOnDestroy（）并减去一个。

向数据库文档添加1似乎正常。但是问题是，当我用F5刷新页面时，它不会减去1。我尝试通过在ngOnInit中添加window.onbeforeunload = () => this.ngOnDestroy();来解决问题，但是问题并没有得到解决。即使只是刷新页面几次，它也会继续添加成员。仅当我刷新时才会出现此问题，而当我浏览网站时却不是问题。

任何人都可以对如何解决此问题提出建议吗？

forumCount.component.ts

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

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

    ngOnDestroy(){
        console.log('activated ngOnDestroy');
        let loggedIn = this.authService.isLoggedIn();

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

forumCount.component.html

<div class="row justify-content-center mb-5">
    <div class="col-md-8">
        <div class="card">
            <p class="card-header">Who's Online?</p>
            <div class="card-body">
                <p class="card-text">In total there are {{data?.total}} users online :: {{data?.registered}} registered and {{data?.guests}} guests
                    <br/>
                    <br/>
                    The highest amount of online users was {{data?.highestNumber.num}} on {{data?.highestNumber.date | amDateFormat:'MMMM Do YYYY, h:mm:ss a'}}</p>
            </div>
        </div>
    </div>
    <div class="col-md-2">
    </div>
</div>

Answer 1

好的，

由于Rodrigo的建议，我得以解决它。

import {Component, OnDestroy, OnInit} from "@angular/core";
import {AuthenticationService} from "../auth/auth.service";
import {ForumService} from "./forum.service";
import {Subject} from "rxjs/Subject";


@Component({
    selector: 'forum-count',
    templateUrl: 'forum-count.component.html',
    styleUrls: ['forum-count.component.css']
})

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

        window.onbeforeunload = () => {
            this.subtractOne()
        };
    }

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

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

    ngOnDestroy(){
        this.subtractOne();
    }


}

我只是创建了这个extractOne方法，而不是调用ngOnDestroy，现在它就像一个超级按钮一样工作。

角度：刷新页面似乎激活了ngOnInit，但未激活OnDestroy

1 个答案: