Tartalomjegyzék

< Angular

Angular - Observable

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:

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

Linkek