相关疑难解决方法(0)

使用 takeUntil 和 mergeLatest 取消订阅 rxjs observable 不起作用

我正在使用接受的模式来取消订阅我的订阅:

private ngUnsubscribe: Subject<void> = new Subject();

ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
}
Run Code Online (Sandbox Code Playgroud)

但是,我在使用以下 rxjs 代码时遇到问题takeUntilcombineLatest

this.observableA$.pipe(
    takeUntil(this.ngUnsubscribe),
    combineLatest(
        this.observableB$,
        this.observableC$
    )
).subscribe(([A, B, C]) => {
    // do some work   
})
Run Code Online (Sandbox Code Playgroud)

此订阅似乎持续存在,因为我可以看到在组件被销毁并重新初始化后多次触发代码。任何帮助将不胜感激。

subscription observable rxjs angular

4
推荐指数
1
解决办法
6809
查看次数

取消订阅订阅Angular的最简单方法

嗨,我对Angular很新.我有大约4个数据库查询,每个都是Subscriptions(rxjs/Rx).所以我知道我需要取消订阅每个订阅以节省内存泄漏.我该如何优化通话?我的意思是,我不想打电话给每个订阅并逐个取消订阅.我想在一次通话中取消订阅.对不起,如果这是一个愚蠢的问题.伙计们好吗?提前致谢

rxjs angular

3
推荐指数
1
解决办法
945
查看次数

Angular取消订阅BehaviorSubject为Observable

BehaviorSubject在我的一个服务中创建,并使用它asObservable稍后订阅它,但我需要在控制器被销毁后取消订阅,我该如何取消订阅它.

服务

import { Observable, BehaviorSubject } from 'rxjs';

  private currentStepObject = new BehaviorSubject<number>(0);
  public currentStepObservable = this.currentStepObject.asObservable();

  constructor(
  ) { }

  public changecurrentStep(step: number): void {
    this.currentStepObject.next(step);
  }
Run Code Online (Sandbox Code Playgroud)

调节器

 import { ReaderService } from '../../../../services/reader/reader.service';

   constructor(
    private readerServices: ReaderService
   ) { }

   ngOnInit() {
     this.initDocumentData();
     this.readerServices.currentStepObservable
      .subscribe((step) => {
        this.currentStep = step;
      });
  }

  ngOnDestroy() {
  }
Run Code Online (Sandbox Code Playgroud)

typescript angular

3
推荐指数
2
解决办法
2146
查看次数

不带参考句柄的订阅实例是否需要取消订阅?

只是好奇是否Subscription需要取消订阅未被引用的实例?例如,此演示调用:

onSubmit(creds: Creds) {
   this.authService.login(creds).subscribe();
}
Run Code Online (Sandbox Code Playgroud)

因此,每次有人登录Subscription实例时都会创建并返回,但是没有句柄.

IIUC这些只是垃圾收集,但我想要仔细检查以确保安全.

javascript node.js rxjs typescript angular

3
推荐指数
1
解决办法
71
查看次数

take(1) 和取消订阅之间的区别

假设我不使用异步管道。我想订阅 component.ts 文件中的一些内容。如你所知,如果不是 http 请求,我应该取消订阅自己。

这是我尝试过的。

方式1)实现ondestroy钩子并在那里取消订阅

方式2)订阅时使用 take(1) 。take(1) 将自行取消订阅。

我的问题是 -为什么有人会选择方式 1 以及当我们想要取消订阅时我们应该使用哪一种(如果我们不需要异步管道)

observable rxjs angular

3
推荐指数
1
解决办法
3768
查看次数

组件 ngOnInit 中的 Angular 订阅

我正在学习 Angular 5+,最近谈到主题/订阅部分,我看到很多教程都想以某种方式使用订阅:

  1. 在组件中声明订阅
  2. 通过服务的主题或 ngrx/store 在 ngOnInit 中订阅它
  3. 在 ngOnDestroy 中取消订阅

但是,我不确定我们是否必须订阅/取消订阅 ngOnInit 和 ngOnDestroy 中组件中的每个订阅。例如,如果我的订阅将通过按钮单击事件进行更新,我应该在组件中订阅哪个计划?

  1. 仅 ngOnInit
  2. 仅按钮点击事件
  3. ngOnInit 和按钮单击事件

为什么我们总是在 ngOnInit 中订阅订阅?ngOnInit 就像页面生命周期中的 Page_Load 一样,因此它只会在第一次被调用一次,如果是这样,每当订阅更新时,ngOnInit 是否会一遍又一遍地被触发?如果是这样,我的组件是否会被一遍又一遍地加载,这在大型应用程序中会导致性能问题?

subject subscription ngoninit angular5 angular6

2
推荐指数
1
解决办法
1万
查看次数

将 rxjs take() 与 Angular 的 http 结合使用

假设我在提供者中有一个这样的函数:

getAll(): Observable<CarModel[]> {
    return this.http.get<CarModel[]>(this.carUrl);
}
Run Code Online (Sandbox Code Playgroud)

在组件中,我有一个使用提供程序的此函数的函数:

getCars() {
        const that = this;
        this.carService.getAll().subscribe(function(cars) {
            that.factoryService.setCars(cars);
            this.unsubscribe();
        });
    }
Run Code Online (Sandbox Code Playgroud)

是否可以将其替换为使用take运算符的函数以避免调用unsubscribe()

getCars() {
        const that = this;
        this.carService.getAll().take(1).subscribe(function(cars) {
            that.factoryService.setCars(cars);
        });
    }
Run Code Online (Sandbox Code Playgroud)

我想知道与 Angular 的 Httpclient 方法一起使用时是否会产生任何意外或不需要的行为?我从来没有见过像这样使用 Angular 的 Httpclient - 这就是我问的原因。

javascript rxjs angular

2
推荐指数
1
解决办法
1443
查看次数

取消订阅仅在必要时发出一次的可观察计时器?

在我的程序中,我有一些timer(1000).subscribe()实例以及一些timer(1000, 1000).subscribe()部分。

我遇到了一些内存泄漏问题,想知道是否可以通过取消订阅计时器来缓解这些问题。取消订阅循环计时器似乎是直接且必要的,但我是否还必须取消订阅仅发出一次的计时器?

我的问题的第二部分是是否有更好的方法来取消订阅发射计时器而不是将其放入变量中,如下所示:

const myTimer = timer(1000).subscribe(() => {
    myTimer.unsubscribe();
});
Run Code Online (Sandbox Code Playgroud)

谢谢!

node.js observable rxjs typescript rxjs-observables

2
推荐指数
1
解决办法
732
查看次数

同一请求的多个 API 调用

我想使用传递不同 id 的同一端点进行多个 HTTP 调用。有没有更好的方法从 UI 处理这个问题。目前无法更改后端,有更好的方法吗?

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, forkJoin } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  loadedCharacter: {};
  constructor(private http: HttpClient) {}

  ngOnInit() {
    let character1 = this.http.get('https://swapi.co/api/people/1');
    let character2 = this.http.get('http://swapi.co/api/people/2');

    forkJoin([character, character2]).subscribe(results => {
      // results[0] is our character
      // results[1] is our character2
    });
  }
}
Run Code Online (Sandbox Code Playgroud)

javascript rxjs angular

2
推荐指数
2
解决办法
2万
查看次数

Observable <>类型上不存在取消订阅?

我试图取消订阅ngOnDestroy中的一个observable,但它告诉我它在Observable类型中不存在.

export class AppComponent implements OnInit {
  public caseData;

  constructor(private _caseService: CaseService,
              private _title: Title,
              private _metaService: Meta) { }

  ngOnInit(): void {
    this._caseService.GetCaseData('en', 'English');
    this._caseService.caseData$.subscribe(res => { this.caseData = res },
      (error) => { console.log(error) });
  }

  ngOnDestroy() {
    this._caseService.caseData$.unsubscribe(); //says it does not exist
  }
}
Run Code Online (Sandbox Code Playgroud)

angular

1
推荐指数
1
解决办法
2811
查看次数

Angular RxJS - 取消订阅mergeMap?

遵循此Stack Overflow帖子中描述的最佳实践:Angular RxJS何时应取消订阅订阅,请考虑此Angular组件生命周期钩子:

private ngUnsubscribe: Subject<void> = new Subject();

ngOnInit() {
  this.fireAuth.authState
    .takeUntil(this.ngUnsubscribe)
    .mergeMap((user) => this.todoService.getUserTodos(user.uid))
    .takeUntil(this.ngUnsubscribe)
    .subscribe((todos) => this.userTodoArray = todos);
}

ngOnDestroy() {
  this.ngUnsubscribe.next();
  this.ngUnsubscribe.complete();
}
Run Code Online (Sandbox Code Playgroud)

作为authState()mergeMap()两个返回Observables,我想我应该

  1. 取消订阅它们(如上所示)或
  2. 只能takeUntil()从外部Observable authState()或内部Observable 调用其中一个运算符this.todoService.getUserTodos(user.uid).

哪个方法是正确的,以确保在组件被销毁后取消订阅所有Observable?

observable rxjs angularfire2 angular

1
推荐指数
1
解决办法
1452
查看次数

如何取消订阅 Angular 服务创建的可观察对象

我对 Angular 还很陌生,我的问题可能看起来很基本,但如果能提供一些指导,我将不胜感激。我目前正在编写一个应用程序来自学一些真正的开发技能。在我的应用程序中,我有一个 Angular 组件,它导入我编写的提供数据的服务。

这是我的组件

@Component({
  selector: 'music-instrument-list',
  templateUrl: './instrument-report.component.html',
  styleUrls: ['./instrument-report.component.css']
})
export class InstrumentReportComponent implements OnInit, OnDestroy {
    
    constructor(public apiService: ApiService) {}
    public availableInstruments: any[];

    ngOnInit() {
        this.apiService.getInstruments().subscribe((result) => {
            this.availableInstruments = result;
        });
    }

    ngOnDestroy() {
    // how do I unsubscribe?
    }
}
Run Code Online (Sandbox Code Playgroud)

这非常简单,但如果我尝试添加this.apiService.getInstruments.unsubscribe()ngOnDestroy块中,我会收到以下错误:Type => Observable' 上不存在 Property 'unsubscribe'。我什至考虑过在类似链接.unsubscribe()之后添加.subscribe(),但这只会使我的页面挂起。我也没有收到任何错误。有人可以告诉我如何最好地取消订阅吗?我是否需要将 api 调用分配给变量,然后在块中的变量名称上使用 .unsubscribe( ngOnDestroy)

angular angular-observable rxjs-observables

1
推荐指数
1
解决办法
7202
查看次数

Angular 在组件销毁时不释放内存

我有两个组件:ComponentList 和 ComponentDetail。它现在的工作方式是,用户将从列表中选择一个,然后将其重定向到 ComponentDetail,该 ComponentDetail 调用 API 并获取可观察的大型数据集。现在,我遇到的问题是,当我返回 ComponentList 时,ComponentDetail 使用的内存不会在 onDestroy 时被垃圾收集。它会在十分钟后关闭,但如果从开发工具中强制进行 GC,它将快速释放内存空间。我不确定是什么导致它需要很长时间才能自动收集,我可以做些什么来使垃圾收集在 ngOnDestroy 之后立即发生吗?

javascript v8 angular

1
推荐指数
1
解决办法
1646
查看次数