在Angular中,要反映组件输入,可以使用Input装饰器。
首先,在需要接收输入的组件中,使用@Input()装饰器来定义一个输入属性。例如:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
{{ childInput }}
`
})
export class ChildComponent {
@Input() childInput: string;
}
在上面的示例中,我们定义了一个名为childInput的输入属性。
然后,在父组件中,可以通过绑定属性的方式将值传递给子组件。例如:
在上面的示例中,我们使用[childInput]="parentInput"将父组件的parentInput属性的值传递给子组件的childInput属性。
最后,父组件需要在其类中定义parentInput属性,并将其赋予一个值。例如:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
parentInput = 'Hello from parent component';
}
在上面的示例中,我们定义了一个名为parentInput的属性,并将其赋予一个值。
这样,当父组件的parentInput属性的值发生变化时,子组件的childInput属性也会自动更新,因此子组件中的相应内容也会反映出输入的变化。