在Angular中,可以通过使用@Input和@Output装饰器来实现双向数据绑定在子组件中。以下是一个示例:
父组件的HTML模板:
父组件的TypeScript代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
parentData: string = "Hello, World!";
onDataChanged(newData: string) {
this.parentData = newData;
}
}
子组件的TypeScript代码:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`
})
export class ChildComponent {
@Input() data: string;
@Output() dataChanged = new EventEmitter();
childData: string;
onDataChanged() {
this.dataChanged.emit(this.childData);
}
sendData() {
this.dataChanged.emit(this.childData);
}
}
在上面的示例中,父组件通过给子组件传递一个名为"data"的属性来实现数据绑定。子组件使用@Input装饰器来接收父组件传递的数据。子组件中的输入框使用[(ngModel)]指令来实现双向绑定,当输入框中的值发生变化时,会自动更新子组件中的"childData"属性值。当点击"Send Data"按钮时,子组件会触发"dataChanged"事件,并将新的数据通过@Output装饰器发送给父组件。父组件通过监听"dataChanged"事件来更新自己的数据。