在 Angular 中,有时候需要从一个组件传递数据到它的子组件,子组件又需要将数据传递给下一个子组件,这就是多级数据传递。为了实现多级数据传递,可以使用 @Input 装饰器和属性绑定来实现。具体步骤如下:
@Component({
selector: 'parent-component',
template:
})
export class ParentComponent {
parentData = { name: 'John', age: 30 };
}
@Component({
selector: 'child-component',
template:
})
export class ChildComponent {
@Input() data: any;
childData = { ...this.data, address: '123 Main St' };
}
@Component({
selector: 'grandchild-component',
template: Name: {{ data.name }} Age: {{ data.age }} Address: {{ data.address }}
})
export class GrandchildComponent {
@Input() data: any;
}
这样就可以实现多级数据传递了。需要注意的是,如果需要传递的数据比较复杂,可以使用服务来处理数据,而不是直接传递给子组件。