Angular 中分离的双向数据绑定

Question

我有一个自定义表组件，它需要一个模型来执行某些行选择操作，这些操作可以像这样进行双向绑定：

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

或者，如果我不关心该模型发生的更改，我也可以简单地通过单向数据绑定传递一个项目：

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

如果我不想有一个双向绑定的数据项，而是想要一个数据项，我可以通过单向数据绑定和一个处理程序/事件发射器向下传递到表组件，以便语法结束与此不同：

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

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

谢谢！

Answer 1

不，您不需要在my-table组件表内进行任何更改。仅当您想使用自定义事件发出时才使用，(selectedChange)而不是仅(selected)此而已。我希望您已经在组件内部的某个地方进行了Input绑定selected和Output绑定。选择更改属性绑定也是完全可选的。selectedChangemy-table

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

如果您想知道如何以两种方式绑定东西 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" />