发出更改或绑定到模型不起作用

Question

我目前正在学习组件的使用方式以及何时应该创建组件。

我已经了解到，例如在创建任务列表时，最好的方法是使用无状态包装器，然后是有状态任务列表项和复选框组件。 （见下文）

Example of Task stateful and stateless

我目前面临的问题是找出问题的最佳实践并付诸实践。

1. 将复选框中的（更改）事件发送到无状态组件，然后将Model.Done标志设置为True或False。

2. 将Model.Done绑定到Checkbox组件，以便它自动更改。

2的例子：

Task.component

<div fxFlex='20' style="background: #C3C3C3">
  <app-task-list-item *ngFor="let task of tasks" [task]="task"></app-task-list-item>  
</div>

任务一览Item.component

<div style="display: flex;">
  <p style="padding-right: 2em;">{{task.date}}</p>
  <p style="padding-right: 2em;">{{task.description}}</p>
  <app-task-list-checkbox [checked]="task.done"></app-task-list-checkbox>
</div>

任务一览Checkbox.component

<input type="checkbox" [checked]="checked">

我问的问题是：

1. 您是否会将复选框更改为无状态组件？
2. 您是否会创建一个复选框组件或将其添加到Task-List-Item.component？

Answer 1

您不必向无状态组件发射任何内容。只需使用双向数据绑定您的复选框即可。由于对象引用，当您切换复选框时，数组任务中的每个任务都会更改其done属性。您也不必为单个复选框创建组件，只需将其放入Task-List-Item.component

即可。

任务一览Item.component：

<div style="display: flex;">
    <p style="padding-right: 2em;">{{task.date}}</p>
    <p style="padding-right: 2em;">{{task.description}}</p>
    <input [(ngModel)]="task.done" type="checkbox"/>
</div>