Как определить, какой компонент отвечает?

Question

У меня есть следующая вложенная структура компонентов:

<app-orders>
    <app-orders-list><div *ngFor="let order of orders"></div></app-orders-list>
    <app-pagination></app-pagination>
    <app-pagination-showby></app-pagination-showby>
</app-orders>

Я не уверен в этой структуре, поэтому вопрос:

1. Если app-orders-list имеет разбиение на страницы, должно быть <app-pagination></app-pagination> внутри?
2. Если <app-pagination></app-pagination> зависит от выходных параметров showBy от компонента <app-pagination-showby></app-pagination-showby> - должно ли оно быть внутри <app-pagination></app-pagination>?

Я немного запутался ...

Answer 1

app-pagination лучше быть независимым от app-orders-list. таким образом вы можете использовать app-pagination с разными представлениями, а не только с app-orders-list. Вот пример с ng- bootstrap pagination для вдохновения.

Что касается списка, возможные хорошие дизайны:

// the word `list` implies that component would accept items to be processed
<app-orders-list [items]='orders">
// if there is a need for item template flexibility, you can make it adjustable
    <ng-template itemTemplateDirective></ng-template>
</app-orders-list>

// if you iterate all items and use a component to display item than it is a `list-item`
<app-orders-list-item *ngFor="let order of orders"></div></app-orders-list-item>