所以我正在努力提高我的 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();
})
}
最佳答案
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();
})
}
关于javascript - ngOnDestroy 未在页面重新加载时触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50761416/