为了在Angular中从父组件将数据传递到子组件中,我们可以使用@Input()装饰器来定义子组件的一个输入属性。在父组件中,我们可以使用该输入属性来传递数据。但是,在使用Angular表单时,我们可能会遇到该问题,即表单控件的值无法使用@Input()传递到子组件中。
为了解决此问题,我们可以在子组件中使用ngOnChanges()生命周期钩子来检测输入属性的更改,并在更改时更新组件的局部变量。在以下示例中,我们在子组件中创建一个名为“data”的输入属性,并在ngOnChanges()生命周期钩子中更新组件的局部变量。
父组件:
子组件:
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-child',
template: '{{ data }}'
})
export class ChildComponent implements OnChanges {
@Input() data: string;
value: string;
ngOnChanges(changes: SimpleChanges): void {
if (changes.data) {
this.value = changes.data.currentValue;
}
}
}