在Angular中,可以使用@Input
装饰器来接收父组件传递的数据。以下是一个示例代码,演示了如何在初始化后获取父组件传递的数据。
父组件(parent.component.ts):
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent {
parentData = 'Hello from parent component!';
}
子组件(child.component.ts):
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
template: `
{{ receivedData }}
`,
})
export class ChildComponent implements OnInit {
@Input() data: string;
receivedData: string;
ngOnInit() {
this.receivedData = this.data;
}
}
在上面的示例中,父组件通过[data]="parentData"
将数据传递给子组件。子组件使用@Input()
装饰器将接收到的数据绑定到data
属性上。在子组件的ngOnInit
生命周期钩子中,可以将data
属性的值赋给receivedData
属性,以便在子组件的模板中进行显示。
通过这种方式,子组件在初始化后就可以获得父组件传递的数据。