在Angular中,可以通过使用@Output
装饰器和EventEmitter
来实现子表单控件/组的值和错误向上冒泡到父级。
首先,在子组件中定义一个@Output
属性,并使用EventEmitter
作为其类型。然后,在子组件中监控表单控件/组的变化,并在变化时触发@Output
属性。
子组件示例代码:
import { Component, EventEmitter, Output } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-child-component',
template: `
`
})
export class ChildComponent {
childControl: FormControl = new FormControl();
@Output() valueChange: EventEmitter = new EventEmitter();
constructor() {
this.childControl.valueChanges.subscribe(value => {
this.valueChange.emit(value);
});
}
}
然后,在父组件中使用子组件,并订阅子组件的@Output
属性来获取子组件的值和错误。
父组件示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-component',
template: `
`
})
export class ParentComponent {
onValueChange(value: string) {
// 处理子组件的值
console.log(value);
}
}
通过以上代码,子组件中的表单控件的值和错误会通过valueChange
事件向上冒泡到父组件中,父组件可以通过onValueChange
方法来处理这些值和错误。
上一篇:Angular子/父路由问题
下一篇:Angular自定义按键自动完成