Container vs. Presentational Components
Supposons que nous disposons dans notre composant
app, d'une liste bookList contenant une liste d'instance d'une classe Book que nous souhaitons afficher.book/book.ts
1
export class Book {
2
3
title?: string;
4
5
constructor(args: Book = {}) {
6
this.title = args.title;
7
}
8
9
}
Copied!
app.component.ts
1
import { Book } from './book/book';
2
3
...
4
export class AppComponent {
5
bookList = [
6
new Book({
7
title: 'eXtreme Programming Explained'
8
}),
9
new Book({
10
title: 'ReWork'
11
})
12
];
13
};
Copied!
Laissez bien sûr l'IDE s'occuper des imports via l'auto-complete ou l'auto-import (Alt + Enter chez JetBrains).
IntelliJ Class Completion
IntelliJ Auto Import
Il serait intéressant de déléguer l'affichage de chaque
book au composant book-preview que nous pourrons réutiliser plus tard dans d'autres contextes.Dans ce cas, nous séparons les responsabilités entre le composant
app et le composant book-preview.app.component.html
1
<!-- Display one book-preview component for each book... -->
2
<!-- ...but we need to find some way to pass the book to each component. -->
3
<wt-book-preview
4
*ngFor="let book of bookList"></wt-book-preview>
Copied!
Container Component (ou Smart Component)
Le composant
app s'occupe donc de la "business logic" et sélectionne les objets book à afficher via la propriété bookList.
Il est donc un "Container Component" qui délègue l'affichage à des "Presentational Components".Presentational Component (ou Dumb Component)
Le composant
book-preview ne sait pas d'où provient le book à afficher mais il sait l'afficher.
Il est donc un "Presentational Component" qui est débarrassé de la "business logic".Article plus détaillé sur le sujet
The Guide to Building Quality Angular 2+ Components
Wishtack
Interaction entre Composants
Il ne reste plus au composant app qu'à communiquer chaque
book au composant book-preview associé. Cf. Interaction entre Composants.Dernière mise à jour 2yr ago