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组件内的某个位置selected了Input绑定和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

父组件.html

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

父组件.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'})
}

或者 ： -

用户服务.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'})
}

父组件.html

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

父组件.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已经通过selected和selectedChange()实现了@Input()和@Output() selectedChange() 。

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

@Input() date : date ;

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

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

如果你不想使用双向数据绑定，你可以省略()在[(date)] ，只是使用[date] ，它仍然会像一个正常的父子组件通信。

如果您想监听更改并对date变量值执行一些操作，那么您可以使用(dateChange)事件发射器并将其与函数绑定，以便您可以监听更改。

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

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

因此，现在您将selectedRows作为输入，并将selectedChange作为输出，如果selected有任何更改， selected发出event ，并且该事件通过handleSelectedChanged()传递。