在Angular中,可以使用@Input
装饰器在一个属性上创建一个属性。
以下是一个示例代码:
在父组件中,定义一个属性message
,并通过装饰器@Input()
将其暴露给子组件:
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
message = 'Hello from parent';
}
在子组件中,通过@Input()
装饰器接收父组件传递的属性值,并在子组件模板中使用该属性:
@Component({
selector: 'app-child',
template: `
{{ inputMessage }}
`
})
export class ChildComponent {
@Input() inputMessage: string;
}
在这个示例中,父组件通过[inputMessage]="message"
将属性message
传递给子组件的inputMessage
属性。子组件通过@Input()
装饰器接收父组件传递的属性值,并在模板中使用该属性。
当父组件的message
属性更新时,子组件的inputMessage
属性也会相应地更新,从而实现了在一个属性上创建一个属性的功能。