在Angular中,可以使用Input
装饰器将参数传递给其他组件。以下是一个解决方法的示例:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
parentData = 'Hello from parent component';
sendData() {
// 可以在这里更新 parentData 值
this.parentData = 'Updated data from parent component';
}
}
子组件:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Data from parent: {{ data }}
`
})
export class ChildComponent {
@Input() data: string;
}
在父组件的模板中,使用[data]="parentData"
将parentData
值传递给子组件。
在子组件中,使用@Input()
装饰器来接收父组件传递的值,并在模板中使用它。
这样,当点击按钮时,父组件的sendData
方法将更新parentData
的值,并将新值传递给子组件,子组件接收到新值后在模板中显示。