[英]Separate two-way data binding in Angular
I have a custom table component that expects a model for some row selection actions that can be two-way bound like so:我有一个自定义表组件,它需要一个模型来执行某些行选择操作,这些操作可以像这样进行双向绑定:
<my-table [(selected)]="selectedRows"></my-table>
Optionally, I can also simply pass an item via one-way data binding if I don't care about the changes that happen to that model:或者,如果我不关心该模型发生的更改,我也可以简单地通过单向数据绑定传递一个项目:
<my-table [selected]="selectedRows"></my-table>
If I want to not have a two-way bound data item, and instead want to have a data item I pass down to the table component via one-way data binding, and a handler/event emitter so that the syntax ends up not to different than this:如果我不想有一个双向绑定的数据项,而是想要一个数据项,我通过单向数据绑定和一个处理程序/事件发射器向下传递到表组件,以便语法结束与此不同:
<my-table [selected]="selectedRows" (selected)="handleSelectedChanged($event)"></my-table>
Is it possible with no, or minimal changes to the my-table
component?是否可以对
my-table
组件不做更改或更改最少? Or do I have to create an @Output
parameter on the my-table
component to which I pass handleSelectedChanged($event)
?或者我是否必须在将
handleSelectedChanged($event)
传递给的my-table
组件上创建@Output
参数?
Thank you!谢谢!
No you don't need to do any changes inside the my-table
component table.不,您不需要在
my-table
组件表中进行任何更改。 Only when you want to use custom event to be emitted use (selectedChange)
instead of (selected)
that's it.仅当您想使用要发出的自定义事件时,才使用
(selectedChange)
而不是(selected)
。 I hope you already had Input
binding selected
and Output
binding selectedChange
in a place inside my-table
component.我希望您已经在
my-table
组件内的某个位置selected
了Input
绑定和Output
绑定selectedChange
。 Also selected change property binding is completely optional.选择更改属性绑定也是完全可选的。
<my-table
[selected]="selectedRows"
(selectedChange)="handleSelectedChanged($event)">
</my-table>
If you're wondering how two way binding stuff needed to have Change
suffix on event, because that's by design.如果您想知道如何通过两种方式绑定东西才能在事件上添加
Change
后缀,因为这是设计使然。 For understanding it more clearly you can have a look at angular ngModel directive as well.为了更清楚地理解它,您也可以查看 angular ngModel 指令。
<input [ngModel]="myModel" (ngModelChange)="myModel = $event" />
// You can also do assignment by calling function
<input [ngModel]="myModel" (ngModelChange)="inpuChanged($event)" />
can be written as可以写成
<input [(ngModel)]="myModel" />
<my-table [selected2]="selectedRows" (selected)="handleSelectedChanged($event)"></my-table>
handleSelectedChanged(event){
// console.log(event)
this.selectedRows = event
}
@Input() selected2: any;
@Output() selected: EventEmitter<any> = new EventEmitter();
OnCLCICK(){
this.selected.emit({'key':'value'})
}
or :--或者 : -
@Output() selected: EventEmitter<any> = new EventEmitter();
setselected(data) {
this.selected.emit(data);
}
getselected() {
return this.selected;
}
@Input() selected2: any;
constructor(
public user: Userservice
){
}
onclick(){
this.user.setselected({'key','val'})
}
<my-table [selected2]="selectedRows"></my-table>
constructor(
public user: Userservice
){
}
ngOnInit(){
this.userService.getselected().subscribe((data) => {
this.getData(data);
});
}
getData(data){
console.log(data)
}
Your my-table.component.ts
already has an @Input()
and @Output()
implemented ie through selected
and selectedChange()
.您的
my-table.component.ts
已经通过selected
和selectedChange()
实现了@Input()
和@Output()
selectedChange()
。
For a custom two way data binding , angular expects the event emitter and the variable to be something like this :对于自定义的双向数据绑定,angular 期望事件发射器和变量是这样的:
@Input() date : date ;
@Output() dateChange : EventEmitter<Date> = new EventEmitter<Date>();
So when you use [(date)]
, you have a two way data binding created .因此,当您使用
[(date)]
,您将创建一个双向数据绑定。
if you don't want to use two way data binding you can omit the ()
in the [(date)]
and just use [date]
, and it will still behave like a normal parent child component communication .如果你不想使用双向数据绑定,你可以省略
()
在[(date)]
,只是使用[date]
,它仍然会像一个正常的父子组件通信。
If you want to listen to the changes and do some action to the date
variable value , then you can use (dateChange)
event emitter and bind it with a function so that you can listen for the changes .如果您想监听更改并对
date
变量值执行一些操作,那么您可以使用(dateChange)
事件发射器并将其与函数绑定,以便您可以监听更改。
Now to answer your question whether you have to create a new @Output()
in my-table.component.ts
, well you don't have to create any thing or add any event emitters to bind your handleSelectedChanged($event)
as an Event Emitter is implemented through selectedChange()
.现在回答您是否必须在
my-table.component.ts
创建新的@Output()
my-table.component.ts
,您不必创建任何东西或添加任何事件发射器来绑定您的handleSelectedChanged($event)
作为事件发射器是通过selectedChange()
。 All you have to do now is :你现在要做的就是:
<my-table [selected]="selectedRows" (selectedChange)='handleSelectedChanged($event)'></my-table>
So now you have selectedRows
as an input and selectedChange
as an output that emits an event
if anything changes in selected
and the event is passed through handleSelectedChanged()
.因此,现在您将
selectedRows
作为输入,并将selectedChange
作为输出,如果selected
有任何更改, selected
发出event
,并且该事件通过handleSelectedChanged()
传递。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.