如何在 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);
        });

这是销毁方法:

  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 的 takeUntil 运算符代替.

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() 上的最后一个操作符，以防止任何 observables '泄漏'.

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屋！