diff --git a/formationApp/src/14-observables/my-async.pipe.ts b/formationApp/src/14-observables/my-async.pipe.ts index daaca45..c383228 100644 --- a/formationApp/src/14-observables/my-async.pipe.ts +++ b/formationApp/src/14-observables/my-async.pipe.ts @@ -1,11 +1,12 @@ -import { Pipe, PipeTransform } from '@angular/core'; -import { Observable } from 'rxjs'; +import {OnDestroy, Pipe, PipeTransform} from '@angular/core'; +import {Observable, Subscription} from 'rxjs'; @Pipe({ name: 'myAsync', - standalone: true + standalone: true, + pure: false }) -export class MyAsyncPipe implements PipeTransform { +export class MyAsyncPipe implements PipeTransform, OnDestroy { /* Quelques remarques sur le pipe async : - Notre pipe async est générique, du même type que les valeurs émises par l'observable @@ -15,10 +16,30 @@ export class MyAsyncPipe implements PipeTransform { - Le pipe ne prends pas en compte la complétion où les erreurs de l'observable */ - transform(obs: null | undefined): null - transform(obs: Observable): T | null - transform(obs: Observable | null | undefined): T | null { - return null; + private subscription: Subscription | null = null; + private lastValue: T | null = null; // Tant que l'observable n'a pas émit, le pipe renvoie null + private currentObservable: Observable | null = null; + + transform(obs: null | undefined): null; + transform(obs: Observable): T | undefined; + transform(obs: Observable | null | undefined): T | null | undefined { + if (obs === null || obs === undefined) { + return null; // Le pipe accepte les valeurs nulles ou undefined en entrée, dans ce cas il renvoie null + } + + if (obs !== this.currentObservable) { + this.currentObservable = obs; // me permet de savoir si l'observable a changé + + this.subscription = this.currentObservable.subscribe({ + next: value => { + this.lastValue = value; // Lorsque l'observable à émit, le pipe renvoie la dernière valeur émise + } + }); + } + + return this.lastValue; } + ngOnDestroy() { + this.subscription?.unsubscribe(); } } diff --git a/formationApp/src/14-observables/observable.service.ts b/formationApp/src/14-observables/observable.service.ts index eee3c72..fb0debb 100644 --- a/formationApp/src/14-observables/observable.service.ts +++ b/formationApp/src/14-observables/observable.service.ts @@ -10,7 +10,9 @@ export class ObservableService { readonly observable = new Observable((subscriber) => { console.log("Debut de l'execution de l'observable") - subscriber.next(0); + setTimeout(() => { + subscriber.next(1); + }, 2000); var interval = setInterval(() => { console.log("setInterval de l'observable") subscriber.next(5); diff --git a/formationApp/src/main.ts b/formationApp/src/main.ts index 08b97db..bc5b782 100644 --- a/formationApp/src/main.ts +++ b/formationApp/src/main.ts @@ -1,10 +1,11 @@ import { bootstrapApplication } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './demo/app.module'; +import { AppModule } from './demo/app/app.module'; import { FolderComponent } from './07-component-communication/exercice/folder.component'; +import {MyAsyncComponent} from "./14-observables/my-async.component"; //platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err)); // ou -bootstrapApplication(FolderComponent).catch(err => console.error(err)); +bootstrapApplication(MyAsyncComponent).catch(err => console.error(err));