在Angular中,可以通过@Input()
装饰器将属性值从父组件传递给子组件。下面是一个示例代码:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
parentMessage = 'Hello from parent component';
}
子组件:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Message from parent: {{ message }}
`
})
export class ChildComponent {
@Input() message: string;
}
在上面的示例中,父组件通过[message]="parentMessage"
将parentMessage
属性传递给子组件的message
属性。子组件使用@Input()
装饰器来接收该属性,并在模板中显示出来。
当父组件的属性值发生变化时,子组件的属性值也会相应地更新。这是Angular的变化检测机制的一部分。