我创建了一个意味着要成为交换机的组件。您可以像使用复选框一样使用它。这是一个精简版。
MY-switch.component.ts:
import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'my-switch',
template: `<a (click)='toggle()'>
<span *ngIf='value'>{{onText}}</span>
<span *ngIf='!value'>{{offText}}</span>
</a>`
})
export class MySwitchComponent {
@Input() onText: string = 'On';
@Input() offText: string = 'Off';
@Input() value: boolean;
@Output() change = new EventEmitter <boolean> ();
position: string;
toggle() {
this.value = !this.value;
this.change.emit(this.value);
}
}
我的计划是这样使用它:
父 - component.ts
import {Component} from '@angular/core';
import {MySwitchComponent} from 'my-switch.component';
@Component({
selector: 'my-sites',
directives: [MySwitchComponent]
template: `<table>
<tr *ngFor='let item of items'>
<td>
<my-switch
[(value)]='item.options.option1'
(change)='logItem(item)'>
</my-switch>
</td>
</tr>
</table>`
})
export class MySitesComponent {
items: Object[] = [
{options: { option1: false }}
];
logItem(item) {
console.log(item)
}
}
同样,这是简化的,但我认为说明了我的期望。我的期望是,当单击开关时,视图会从“关闭”更新为“开”,并且会记录该选项的值。问题是记录的值如下所示:
{options: {option1: false}}
我认为被迭代的项目是只读的。我知道我可以解决这个问题,但我想知道我想做的事情是可能的,还是不明智的,以及为什么它不起作用。
答案 0 :(得分:6)
Angular将
[(x)]
语法“去糖”为属性绑定的x
输入属性和事件绑定的xChange
输出属性。 - reference
因此,如果您为输入属性value
命名,则必须将输出属性命名为valueChange
:
@Output() valueChange = new EventEmitter <boolean> ();
这是你想念的唯一一块拼图。您现在在父组件和子组件之间具有双向数据绑定。
如果要在子项更改/ emit()
值时执行某些逻辑,请捕获父组件中的(valueChange)
事件:
(valueChange)='logItem(item)'>
我也建议
console.log(JSON.stringify(item))
答案 1 :(得分:2)
在父子方案中,您可以利用与xxxChange Output property
的双向绑定,如下所示,在父级中 - [(xxx)]="someValue"
在儿童中 - @Input xxx: boolean;
@Output() xxxChange = new EventEmitter <boolean> ();
请注意xxxChange
属性。在您的情况下缺少
现在,Look here for the code- Plunker
<td> From Parent - {{item.options.option1}} <--------------------value will keep changing
<my-switch
[(value)]='item.options.option1'> <---------two way binding
</my-switch>
</td>
请注意,[()]
表示双向绑定,因此在父级中,您无需使用(valueChange)="someValue=$event"
来捕获更改。 [(value)]='item.options.option1'
会自动将新值或更改后的值绑定到item.options.option1
。
export class MySwitchComponent {
@Input() value: boolean;
@Output() valueChange = new EventEmitter <boolean> (); <----xxxChange output property
...
...
}