Ejemplo 1: cancelación de suscripción angular de observable
//Please note that there are many ways to unsubscribe, this is one of them
import { Subscription } from 'rxjs';
private searchEventSubscription: Subscription;
export class someComponent OnInit, OnDestroy {
constructor(private someService: SomeService) { }
ngOnInit() {
this.searchEventSubscription = this.someService.someMethod.subscribe(result => {
doSomething(result);
});
}
ngOnDestroy() {
this.searchEventSubscription.unsubscribe()
}
Ejemplo 2: ejemplo de cancelación de suscripción angular
/* Best practice is to create a base class and move generik handling to it */
import { Subscription, Observable } from 'rxjs';
import { OnDestroy } from '@angular/core';
export abstract class ComponentBase implements OnDestroy {
set subs(subscription: Subscription) {
this.subscriptioions.add(subscription);
}
private subscriptioions = new Subscription();
constructor() {};
subscribe(service: Observable<any>, successFn: (value: any) => void, errorHandler?: (value: any) => void) {
this.subs = service.subscribe(successFn, errorHandler || this.errorHandler);
}
ngOnDestroy() {
this.subscriptioions.unsubscribe();
}
private errorHandler(error) {
// TODO: generic error handling
}
}
/* implementation in a component */
// No need to explicitly subscribe or unsubscribe on destroy
const product$ = this.productService.getProducts(productId);
this.subscribe(product$, (product) => {
// TODO: use product
})
Ejemplo 3: cómo darse de baja de observable creado por http
import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
interface User {
id: string;
name: string;
age: number;
}
@Component({
selector: 'app-foobar',
templateUrl: './foobar.component.html',
styleUrls: ['./foobar.component.scss'],
})
export class FoobarComponent implements OnInit, OnDestroy {
private user: User = null;
private destroy$ = new Subject();
constructor(private http: HttpClient) {}
ngOnInit() {
this.http
.get<User>('api/user/id')
.pipe(takeUntil(this.destroy$))
.subscribe(user => {
this.user = user;
});
}
ngOnDestroy(): void {
this.destroy$.next(); // trigger the unsubscribe
this.destroy$.complete(); // finalize & clean up the subject stream
}
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)