我希望将子组件值绑定到父组件。如果@Input()
和[(ngModel)]
不够,如何完成此操作?
答案 0 :(得分:8)
此处您还必须设置@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的链接,请查看。
答案 1 :(得分:3)
您可以进行双向数据绑定,如下所示:
@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
的{{1}}属性和名为{{1}的事件(Input
属性)时,可以使用 prop
语法}。
代码来自angular docs以获取更多信息导航到此地址: https://angular.io/guide/template-syntax#two-way-binding---
答案 2 :(得分:0)
使用@Output()
例如
@Output() event: EventEmitter<Type> = new EventEmitter();
通过emit
功能
send(): void {
this.event.emit(data);
}
详细了解EventEmitter