我有一个自定义表组件，它期望为一些可以双向绑定的行选择操作创建一个模型，如下所示：
<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参数？
谢谢！
不需要在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" />
parent.com.ponent.html
<my-table [selected2]="selectedRows" (selected)="handleSelectedChanged($event)"></my-table>
parent.com组件.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.com.ponent.html
<my-table [selected2]="selectedRows"></my-table>
parent.com.ponnet.ts
constructor(
public user: Userservice
){
}
ngOnInit(){
this.userService.getselected().subscribe((data) => {
this.getData(data);
});
}
getData(data){
console.log(data)
}
您的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。