angular 2-4中组件之间的双向绑定
angular 2-4中组件之间的双向绑定
提问于 2017-11-02 19:01:04
我希望将子组件值绑定到父组件。在@Input()和[(ngModel)]不够用的情况下，如何做到这一点？
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-11-02 19:12:28
在这里，您还必须设置@Output并更改组件，如下所示
export class CounterComponent {
@Output('initoChange') emitter: EventEmitter<string> = new EventEmitter<string>();
@Input('inito') set setInitoValue(value) {
this.count = value;
}
count: number = 0;
increment() {
this.count++;
this.emitter.emit(this.count);
}
decrement() {
this.count--;
this.emitter.emit(this.count);
}
}这是plunker的链接，请看一下。
Stack Overflow用户
发布于 2017-11-02 19:15:56
您可以像下面这样进行双向数据绑定：
@Component({
selector: 'app-sizer',
template: `
<div>
<button (click)="dec()" title="smaller">-</button>
<button (click)="inc()" title="bigger">+</button>
<label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>`
})
export class SizerComponent {
@Input() size: number | string;
@Output() sizeChange = new EventEmitter<number>();
dec() { this.resize(-1); }
inc() { this.resize(+1); }
resize(delta: number) {
this.size = Math.min(40, Math.max(8, +this.size + delta));
this.sizeChange.emit(this.size);
}
}并在父组件的模板中对size进行双向绑定，如下所示：
<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>它(双向绑定)只是属性绑定的语法糖，因此它等同于：
<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>当[(prop)]具有名为prop的Input属性和名为propChange的事件(Output属性)时，可以使用Input语法。
代码来自angular docs有关更多信息，请访问以下地址：https://angular.io/guide/template-syntax#two-way-binding---
Stack Overflow用户
发布于 2017-11-02 19:06:57
以@Output()为例
@Output() event: EventEmitter<Type> = new EventEmitter();通过emit函数发送数据
send(): void {
this.event.emit(data);
}阅读有关EventEmitter的更多信息
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47073671
复制相关文章
相似问题
腾讯云开发者
