javascript - Angular 中的独立双向数据绑定(bind)

Question

我有一个自定义表格组件，它需要一个模型来执行一些可以双向绑定(bind)的行选择操作:

<my-table [(selected)]="selectedRows"></my-table>

可选地，如果我不关心该模型发生的变化，我也可以通过单向数据绑定(bind)简单地传递一个项目:

<my-table [selected]="selectedRows"></my-table>

如果我不想有一个双向绑定(bind)的数据项，而是想要一个数据项，我通过单向数据绑定(bind)和一个处理程序/事件发射器传递给表组件，这样语法就结束了最多与此不同:

<my-table [selected]="selectedRows" (selected)="handleSelectedChanged($event)"></my-table>

是否可以不对 my-table 组件进行更改或更改最少？还是我必须在传递 handleSelectedChanged($event) 的 my-table 组件上创建一个 @Output 参数？

谢谢!

Answer 1

不，您不需要在 my-table 组件表中进行任何更改。仅当您想要使用要发出的自定义事件时，才使用 (selectedChange) 而不是 (selected) 就是这样。我希望您已经在 my-table 中的某个位置拥有 Input 绑定(bind) selected 和 Output 绑定(bind) selectedChange 组件。此外，选定的更改属性绑定(bind)是完全可选的。

<my-table 
  [selected]="selectedRows" 
  (selectedChange)="handleSelectedChanged($event)">
</my-table>

---

如果您想知道两种方式绑定(bind)的东西如何需要在事件上添加 Change 后缀，因为这是设计使然。为了更清楚地理解它，您还可以查看 Angular ngModel 指令。

<input [ngModel]="myModel" (ngModelChange)="myModel = $event" />
// You can also do assignment by calling function
<input [ngModel]="myModel" (ngModelChange)="inpuChanged($event)" />

可以写成

<input [(ngModel)]="myModel" />