在 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 组件不进行更改或更改最少？还是我必须在传递handleSelectedChanged($event) 的my-table 组件上创建一个@Output 参数？

谢谢！

Answer 1

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

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

Answer 2

parent.component.html

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

parent.component.ts

handleSelectedChanged(event){
    // console.log(event)
      this.selectedRows = event
    }

my-table.component.ts

@Input() selected2: any;
@Output() selected: EventEmitter<any> = new EventEmitter();

OnCLCICK(){
 this.selected.emit({'key':'value'})
}

或：--

user.service.ts

@Output() selected: EventEmitter<any> = new EventEmitter();

 setselected(data) {
 this.selected.emit(data);
}

getselected() {
        return this.selected;
      }

my-table.component.ts

@Input() selected2: any;

constructor(
public user: Userservice
){
}

 onclick(){
this.user.setselected({'key','val'})
}

parent.component.html

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

parent.componnet.ts

    constructor(
    public user: Userservice
    ){
    }

ngOnInit(){
this.userService.getselected().subscribe((data) => {
      this.getData(data);
    });
}

getData(data){
console.log(data)
}

Answer 3

您的 my-table.component.ts 已经实现了 @Input() 和 @Output() ，即通过 selected 和 selectedChange() 实现。

对于自定义的双向数据绑定，angular 期望事件发射器和变量是这样的：

@Input() date : date ;

@Output() dateChange : EventEmitter<Date> = new EventEmitter<Date>();

因此，当您使用 [(date)] 时，您会创建一个双向数据绑定。

如果您不想使用双向数据绑定，您可以省略 [(date)] 中的 () 并直接使用 [date] ，它仍然会像正常的父子组件通信一样。

如果你想监听变化并对date变量值做一些动作，那么你可以使用(dateChange)事件发射器并绑定一个函数，这样你就可以监听变化了。

现在回答您的问题，您是否必须在 my-table.component.ts 中创建一个新的 @Output()，您不必创建任何东西或添加任何事件发射器来绑定您的 handleSelectedChanged($event)，因为实现了事件发射器通过selectedChange()。你现在要做的就是：

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

所以现在您将selectedRows 作为输入，selectedChange 作为输出，如果selected 发生任何变化并且事件通过handleSelectedChanged() 传递，则会发出event。