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 1yr ago