在Angular中,可以通过使用@Input()
装饰器将数据以对象形式接收。以下是一个示例代码:
在父组件中,定义一个包含数据的对象,并将其传递给子组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
myData = { name: 'John', age: 25 };
}
在子组件中,使用@Input()
装饰器来接收数据对象,并在模板中显示数据:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
{{ data.name }}
Age: {{ data.age }}
`
})
export class ChildComponent {
@Input() data: any;
}
在上述示例中,父组件通过属性绑定将myData
对象传递给子组件的data
属性。在子组件中,使用@Input()
装饰器来接收data
属性,并在模板中显示对象的属性。
请注意,data
属性的类型被设置为any
,这是因为我们将接收任意类型的对象。如果你知道要传递的数据对象的类型,你可以将其设置为相应的类型。
上一篇:Angular数据未加载
下一篇:Angular数据源不排序