时间戳

首页 > 解决方案 > 如何定义哪个组件负责？

angular - 如何定义哪个组件负责？

问题描述

我有以下组件的嵌套结构：

<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>吗？

我有一点疑惑...

标签： angularangular8angular9

解决方案

app-pagination最好独立于app-orders-list. 通过这种方式，您可以使用app-pagination不同的视图，而不仅仅是app-orders-list. 这是一个使用 ng-bootstrap 分页来获得灵感的示例。

关于列表，可能的好设计：

// 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>

推荐阅读