在Angular中,可以使用输入属性和输出属性来实现自定义组件的数据绑定。输入属性用于从父组件向子组件传递数据,而输出属性用于从子组件向父组件传递数据。
下面是一个示例,展示了如何使用输入属性和输出属性在父组件和子组件之间进行数据绑定:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
Child Data: {{ childEventData }}
`
})
export class ParentComponent {
parentData: string;
childEventData: string;
onChildEvent(eventData: string) {
this.childEventData = eventData;
}
}
子组件:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Parent Data: {{ childData }}
`
})
export class ChildComponent {
@Input() childData: string;
@Output() childEvent: EventEmitter = new EventEmitter();
sendEvent() {
this.childEvent.emit('Child Event Data');
}
}
在父组件中,我们使用[(ngModel)]
来实现双向数据绑定,将输入框中的值绑定到parentData
属性上。然后,我们在子组件上使用[childData]
将parentData
传递给子组件的输入属性childData
。
在子组件中,我们使用@Input
装饰器来定义输入属性childData
,并在模板中使用它显示父组件传递过来的数据。
同时,我们也定义了一个输出属性childEvent
,并使用@Output
装饰器将其声明为一个事件发射器。在子组件的模板中,我们使用(click)
事件绑定来触发sendEvent()
方法,并使用emit()
方法发送一个事件,传递给父组件。
最后,在父组件中,我们使用(childEvent)="onChildEvent($event)"
来订阅子组件发出的事件,并在onChildEvent()
方法中处理事件数据。
通过这种方式,我们可以实现父组件和子组件之间的数据绑定和事件通信。