在Angular2中,可以通过使用@Output和@Input装饰器在父子组件之间实现数据绑定,以确保依赖组件的更改会更新引用它的组件。
示例代码:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
parentData: string = 'Data from parent';
onChildDataChange(data: string) {
this.parentData = data;
}
}
子组件:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
`
})
export class ChildComponent {
@Input() childData: string = '';
@Output() childDataChange = new EventEmitter();
onChildDataChange() {
this.childDataChange.emit(this.childData);
}
}
在这个例子中,父组件将parentData传递给子组件作为childData输入属性。子组件使用ngModel指令来绑定childData到文本输入元素并在更改时触发onChildDataChange事件。这个事件通过childDataChange输出属性emits给父组件新的childData值。父组件设置这个新值为parentData并将其传递给子组件,从而确保了依赖组件的更改会更新引用它的组件。
上一篇:Angular2依赖注入抽象类。
下一篇:Angular2用户输入