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 következő példa a GitHubon:

https://github.com/oktat/angular_unsubscribe.git

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

src/app/app.module.ts

@NgModule({
 
  imports: [
    FormsModule
  ],
 
})

src/app/app.component.html

Gyermek mutatása
 
<input type="checkbox" id="showChild"
name="showChild" [(ngModel)]="showChild">
 
<app-child *ngIf="showChild"></app-child>

src/app/app.component.ts

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);
  }
 
}

src/app/child/child.component.html

<p>child works!</p>

src/app/child/child.component.ts

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:

src/app/child/child.component.ts

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();
  }
 
}

Tartalomjegyzék

Angular - Observable

Az observable

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

Leiratkozás

Linkek