< Angular

Angular - Observable

Szerző: Sallai András

Copyright © Sallai András, 2023

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Az observable

Az obseravble objektumokkal valamilyen eseményre szoktunk feliratkozni. Ügyelnünk kell arra, ha már nem kívánatos a feliratkozás le kell az eseményről iratkozni.

Ha van egy komponens ami létrehoz egy figyelőt, a komponens megszűnésétől a figyelő tovább működik. Ez memória szivárgáshoz vezet.

Vannak az Angularban az implicit létrejött Observable megfigyelők, mint a HttpClient, ami az Angular része; ezeknél a megfigyelőknél nem szükséges a leiratkozás, mert az automatikusan megtörténik.

A memóriaszivárgás szemlétetése

@NgModule({ imports: [ FormsModule ], })
Gyermek mutatása <input type="checkbox" id="showChild" name="showChild" [(ngModel)]="showChild"> <app-child *ngIf="showChild"></app-child>
import { Component, OnInit } from '@angular/core'; import { interval } from 'rxjs'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements OnInit { src = interval(2000); id = Date.now(); constructor() { } ngOnInit(): void { console.log('Az alkalmazás indul' + this.id) this.src.subscribe(() => { console.log('Érkezett: ' + this.id) }) } ngOnDestroy() { console.log('Komponens vége' + this.id); } }
<p>child works!</p>
import { Component, OnInit } from '@angular/core'; import { interval } from 'rxjs'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements OnInit { src = interval(2000); id = Date.now(); constructor() { } ngOnInit(): void { console.log('Az alkalmazás indul' + this.id) this.src.subscribe(() => { console.log('Érkezett: ' + this.id) }) } ngOnDestroy() { console.log('Komponens vége' + this.id); } }

Leiratkozás

A gyermek komponenseben, ahol feliratkoztunk tároljuk a feliratkozást, majd leiratkozunk a komponense megszűnésekor.

Létrehozunk egy obs objektumot a child.component.ts fájlban:

obs !: Subscription;

A feliratkozás eredményét tároljuk az obs objektumban:

this.obs = this.src.subscribe(() => { console.log('Érkezett: ' + this.id) })

A komponens megszűnésekor leiratkozunk:

ngOnDestroy() { console.log('Komponens vége' + this.id); this.obs.unsubscribe(); }

Teljes kód:

import { Component, OnInit } from '@angular/core'; import { interval, Subscription } from 'rxjs'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements OnInit { src = interval(2000); id = Date.now(); obs !: Subscription; constructor() { } ngOnInit(): void { console.log('Az alkalmazás indul' + this.id) this.obs = this.src.subscribe(() => { console.log('Érkezett: ' + this.id) }) } ngOnDestroy() { console.log('Komponens vége' + this.id); this.obs.unsubscribe(); } }

Linkek

https://www.tektutorialshub.com/angular/unsubscribing-from-an-observable-in-angular/ (2023)

https://www.lucaspaganini.com/academy/angular-automatically-unsubscribe-observables-on-destroy (2023)

https://levelup.gitconnected.com/unsubscribing-in-angular-the-right-way-6ed82be43ccc (2023)