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
export class Book {
title?: string;
constructor(args: Book = {}) {
this.title = args.title;
}
}
app.component.ts
import { Book } from './book/book';
...
export class AppComponent {
bookList = [
new Book({
title: 'eXtreme Programming Explained'
}),
new Book({
title: 'ReWork'
})
];
};
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
<!-- Display one book-preview component for each book... -->
<!-- ...but we need to find some way to pass the book to each component. -->
<wt-book-preview
*ngFor="let book of bookList"></wt-book-preview>
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".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".
Il ne reste plus au composant app qu'à communiquer chaque
book au composant book-preview associé. Cf. Interaction entre Composants.Dernière mise à jour 3yr ago