如何在Angular中正确实现ngOnDestroy()? [英] How to implement ngOnDestroy() correctly in Angular?

问题描述

我有一个带有计时器的子组件，每2秒钟我将api调用发送到服务器.只要用户在页面上，即使他/她参加婚礼并使页面(父组件窗口)保持打开状态，我也需要进行此呼叫.

I have a child component with a timer, every 2 second I send api call to the server. I need to do this call as long as the user is on the page even if he/she going to a wedding and leave the page (the parent compoent window) open.

这是我组件中的一些代码:

Here is some code from my component:

this.myTimer = Observable.timer(1, 2000);
    this.myTimer
        .mergeMapTo(this.myService.doSomeWork(this.myId))
        .subscribe((data) => {
                this.myData = data;                
            }, (errRes)=>{
            console.log(errRes);
        });

这是destroy方法:

And here is the destroy method:

  ngOnDestroy(): void {
    this.myTimer.complete();
  }

我只需单击菜单上的其他组件，即可看到调用 到服务器仍在发生. 我什至尝试关闭窗口(Chrome浏览器中的标签页)，但仍然存在对服务器的调用.

I simply click on the menu to different component and see that the calls to the sever is still happening. I've tried even to close the window (the tab from chrome browser), still the calls to server remains.

您知道为什么不调用ngOnDestroy吗?

Any idea why the ngOnDestroy doesn't get called ?

更新 我正在使用"rxjs":"^ 5.5.12"，

UPDATE I'm using "rxjs": "^5.5.12",

来自package.json:

from package.json:

"dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/common": "^5.2.11",
    "@angular/compiler": "^5.2.11",
    "@angular/core": "^5.2.11",
    "@angular/forms": "^5.2.11",
    "@angular/http": "^5.2.11",
    "@angular/platform-browser": "^5.2.11",
    "@angular/platform-browser-dynamic": "^5.2.11",
    "@angular/router": "^5.2.11",
    "angular-file-saver": "^1.1.3",
    "angular-webstorage-service": "^1.0.2",
    "core-js": "^2.6.9",
    "file-saver": "^2.0.2",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "ngx-bootstrap": "^2.0.5",
    "ngx-select-dropdown": "^1.0.1",
    "ngx-select-ex": "^3.6.10",
    "ngx-select-options": "^1.0.5",
    "rxjs": "^5.5.12",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.29"

推荐答案

嗯.您可以尝试使用RxJS的

Hmm.. You can try using RxJS's takeUntil operator instead.

首先，您将takeUntil和Subject导入到组件中.

First and foremost, you import takeUntil and Subject into your component.

import { takeUntil, mergeMap } from 'rxjs/operators';
import { Subject } from 'rxjs/Subject'

下一步，

unsubscribe: Subject<void> = new Subject();

然后

this.myTimer
  .pipe(
    mergeMap(this.myService.doSomeWork(this.myId)),
    takeUntil(this.unsubscribe)
  ).subscribe((data) => {
    this.myData = data;                
  }, (errRes)=>{
    console.log(errRes);
  });

请注意，takeUntil必须是pipe()上的最后一个运算符，以防止任何可观察对象泄漏"出去.

Do take note that takeUntil must be the last operator on your pipe() to prevent any observables from 'leaking' out.

在您的ngOnDestroy上，

And on your ngOnDestroy,

ngOnDestroy() {
  this.unsubscribe.next();
  this.unsubscribe.complete();
}

这篇关于如何在Angular中正确实现ngOnDestroy()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！