我正在使用接受的模式来取消订阅我的订阅:
private ngUnsubscribe: Subject<void> = new Subject();
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
Run Code Online (Sandbox Code Playgroud)
但是,我在使用以下 rxjs 代码时遇到问题takeUntil和combineLatest:
this.observableA$.pipe(
takeUntil(this.ngUnsubscribe),
combineLatest(
this.observableB$,
this.observableC$
)
).subscribe(([A, B, C]) => {
// do some work
})
Run Code Online (Sandbox Code Playgroud)
此订阅似乎持续存在,因为我可以看到在组件被销毁并重新初始化后多次触发代码。任何帮助将不胜感激。
嗨,我对Angular很新.我有大约4个数据库查询,每个都是Subscriptions(rxjs/Rx).所以我知道我需要取消订阅每个订阅以节省内存泄漏.我该如何优化通话?我的意思是,我不想打电话给每个订阅并逐个取消订阅.我想在一次通话中取消订阅.对不起,如果这是一个愚蠢的问题.伙计们好吗?提前致谢
我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) 只是好奇是否Subscription需要取消订阅未被引用的实例?例如,此演示调用:
onSubmit(creds: Creds) {
this.authService.login(creds).subscribe();
}
Run Code Online (Sandbox Code Playgroud)
因此,每次有人登录Subscription实例时都会创建并返回,但是没有句柄.
IIUC这些只是垃圾收集,但我想要仔细检查以确保安全.
假设我不使用异步管道。我想订阅 component.ts 文件中的一些内容。如你所知,如果不是 http 请求,我应该取消订阅自己。
这是我尝试过的。
方式1)实现ondestroy钩子并在那里取消订阅
方式2)订阅时使用 take(1) 。take(1) 将自行取消订阅。
我的问题是 -为什么有人会选择方式 1 以及当我们想要取消订阅时我们应该使用哪一种(如果我们不需要异步管道)
我正在学习 Angular 5+,最近谈到主题/订阅部分,我看到很多教程都想以某种方式使用订阅:
但是,我不确定我们是否必须订阅/取消订阅 ngOnInit 和 ngOnDestroy 中组件中的每个订阅。例如,如果我的订阅将通过按钮单击事件进行更新,我应该在组件中订阅哪个计划?
为什么我们总是在 ngOnInit 中订阅订阅?ngOnInit 就像页面生命周期中的 Page_Load 一样,因此它只会在第一次被调用一次,如果是这样,每当订阅更新时,ngOnInit 是否会一遍又一遍地被触发?如果是这样,我的组件是否会被一遍又一遍地加载,这在大型应用程序中会导致性能问题?
假设我在提供者中有一个这样的函数:
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 - 这就是我问的原因。
在我的程序中,我有一些timer(1000).subscribe()实例以及一些timer(1000, 1000).subscribe()部分。
我遇到了一些内存泄漏问题,想知道是否可以通过取消订阅计时器来缓解这些问题。取消订阅循环计时器似乎是直接且必要的,但我是否还必须取消订阅仅发出一次的计时器?
我的问题的第二部分是是否有更好的方法来取消订阅发射计时器而不是将其放入变量中,如下所示:
const myTimer = timer(1000).subscribe(() => {
myTimer.unsubscribe();
});
Run Code Online (Sandbox Code Playgroud)
谢谢!
我想使用传递不同 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) 我试图取消订阅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) 遵循此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,我想我应该
takeUntil()从外部Observable authState()或内部Observable 调用其中一个运算符this.todoService.getUserTodos(user.uid).哪个方法是正确的,以确保在组件被销毁后取消订阅所有Observable?
我对 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)
我有两个组件:ComponentList 和 ComponentDetail。它现在的工作方式是,用户将从列表中选择一个,然后将其重定向到 ComponentDetail,该 ComponentDetail 调用 API 并获取可观察的大型数据集。现在,我遇到的问题是,当我返回 ComponentList 时,ComponentDetail 使用的内存不会在 onDestroy 时被垃圾收集。它会在十分钟后关闭,但如果从开发工具中强制进行 GC,它将快速释放内存空间。我不确定是什么导致它需要很长时间才能自动收集,我可以做些什么来使垃圾收集在 ngOnDestroy 之后立即发生吗?
angular ×11
rxjs ×8
javascript ×4
observable ×4
typescript ×3
node.js ×2
subscription ×2
angular5 ×1
angular6 ×1
angularfire2 ×1
ngoninit ×1
subject ×1
v8 ×1