Communication inter composants
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:
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:
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:
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