在Angular中,您可以使用@Input
装饰器和属性绑定来在手动嵌套的组件中重用数据。以下是一个包含代码示例的解决方法:
首先,您需要创建一个父组件,该组件将包含要重用的数据,并将其传递给子组件。
父组件的HTML模板:
父组件
父组件的TypeScript代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
parentData: string = '初始数据';
updateData() {
this.parentData = '更新后的数据';
}
}
接下来,您需要创建一个子组件,该组件将接收父组件传递的数据并重用它。
子组件的HTML模板:
子组件
接收到的数据:{{ data }}
子组件的TypeScript代码:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() data: string;
}
在上面的示例中,父组件使用parentData
属性来保存要重用的数据,并在updateData()
方法中更新该数据。然后,父组件通过属性绑定将parentData
传递给子组件的data
属性。
子组件使用@Input()
装饰器来接收从父组件传递的data
属性,并在模板中显示该数据。
这样,每当父组件的数据发生变化时,子组件都会自动更新并重用最新的数据。