如何定义哪个组件负责？

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>

我对这个结构没有信心因此问题是：

如果app-orders-list有分页，应该是<app-pagination></app-pagination>里面吧？
如果 <app-pagination></app-pagination> 依赖于组件 <app-pagination-showby></app-pagination-showby> 的输出参数 showBy - 它应该放在 <app-pagination></app-pagination> 中吗？

我有点糊涂...

Answer 1

app-pagination最好独立于app-orders-list。这样您就可以将 app-pagination 用于不同的视图，而不仅仅是 app-orders-list。 Here is an example with 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>

如何定义哪个组件负责？

How to define which component is responsible?

angular

angular8

angular9