Discussion :

[olivier252]

Hello, me revoilà !

question par rapport un code sur un blog angular dont voici la source :
https://github.com/angular-universit...table-finished

En simplifiant une partie de ce code on a ceci :
- un CourseComponent :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
export class CourseComponent {
 
    dataSource: LessonsDataSource;
 
    constructor(private coursesService: CoursesService) {}
 
    ngOnInit() {
        this.dataSource = new LessonsDataSource(this.coursesService);
        this.dataSource.loadLessons();
    }
 
HTML----------------------------------------------
    <div class="spinner-container" *ngIf="dataSource.loading$ | async">
        <mat-spinner></mat-spinner>
    </div>

Suivi d'une classe LessonDataSource :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
public loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public loading$ = this.loadingSubject.asObservable();
 
    constructor(private coursesService: CoursesService) {}
 
    loadLessons(...) {
        this.coursesService.findLessons();
    }

Et enfin d'un CoursesService :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
@Injectable()
export class CoursesService {
 
 
    findLessons() {
        // to do.....
    }

Pour résumer : dans CourseComponent, on créée une instance de LessonDataSource (dataSource) dont le constructeur prend lui-même une instance du service CourseService. Cela permet d'accéder à la méthode loadLessons() et à la propriété loading$ depuis CourseComponent.

Question : pourquoi ne pas avoir placé directement loadLessons() et loading$ dans le service (comme on fait d'habitude pour communiquer entre compos) ? A quoi sert en fait la classe LessonDataSource ?

Merci

[krakatoa]

en effet, il aurait pu mettre lessonsSubject et loadingSubject à part dans un autre service.
ainsi, LessonsDataSource aurait pu recuperer l'instance de ce nouveau service et utiliser le code .

mais il a tout mis dans LessonsDataSource pour tout regrouper : la gestion du spinner + le chargement + connect et disconnect pour mat-table le tout en rapport avec lessons
c'est une bonne chose de regrouper.

si tu créais une autre datasource: biduleDataSource celui ci disposera de sa propre gestion de spinner, du chargement ..... en rapport avec bidule !

c'est juste une question de praticité et de ne pas avoir pleins de fichiers ou de trop disperser.


LessonsDataSource

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
export class LessonsDataSource implements DataSource<Lesson> {
 
    private lessonsSubject = new BehaviorSubject<Lesson[]>([]);
 
    private loadingSubject = new BehaviorSubject<boolean>(false);
 
    public loading$ = this.loadingSubject.asObservable();
 
    constructor(private coursesService: CoursesService) {
    }
 
    loadLessons(....

[olivier252]

Merci, ça me rassure un peu, mais je pige le fait qu'il faille morceler.

Du coup, je me demande aussi pourquoi dans le LessonsDataSource ils convertissent le BehaviorSubject en observable, alors qu'en faisant le code qui suit ça fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
    public loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    //public loading$ = this.loadingSubject.asObservable(); POURQUOI ?

Dans le HTML de course component ça marche quand même :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    <div class="spinner-container" *ngIf="dataSource.loadingSubject | async">
        <mat-spinner></mat-spinner>
    </div>
// On récupère bien false ici dans le *ngIf

merci

[krakatoa]

(1) - un observable, on s'abonne
(2) - un subject est à la fois un observable (on s'abonne) et un observer (on émet plusieurs valeurs comme un flux)


(1) observable
observableXXX$ --> émet: 1, 2 , 3 ou récupère des données api

- les composants ou services s'abonnent l'observable, reçoit les données
- n'est pas possible d'emettre des valeurs sur l'observable

(2) subject
subjectYYY$ --> émet: 1, 2 , 3 ou récupère des données api

- les composants ou services s'abonnent au subject, reçoit les données
- on peut émettre des valeurs sur le subject avec subjectYYY$.next('toto')

----------------------------------------------------

il est possible de prendre que le coté observable d'un subject quand on a juste besoin de s'abonner (mais pas besoin d'émettre)
donc obsYYY$ = subjectYYY$ as observable

ainsi les composants ou les services que l'on veut restreindre qu'à l'écoute ne peut pas émettre.

pourquoi ?
c'est une bonne pratique, une sécurité.
si on estime que des composants ou des services n'ont pas à vocation d'émettre alors on l'en empêche !

c'est vrai que c'est un peu tiré par les cheveux !
c'est du développement d'un niveau avancé

[olivier252]

ok bien compris ! c'est vrai que dans le cas du tuto on est à la fois obligé d'émettre un boolean en fonction du contexte et de s'en servir pour la structure du template...Ca explique peut être la façon de faire pour coller aux bonnes pratiques : Merci à toi !