在Angular中,可以使用数据绑定来实现两个组件之间的数据传递。以下是一个解决方法的示例:
父组件 (parent.component.ts):
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Parent Component
`,
})
export class ParentComponent {
parentData: string;
}
子组件 (child.component.ts):
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Child Data: {{ childData }}
`,
})
export class ChildComponent {
@Input() childData: string;
}
在父组件中使用双向数据绑定 [(ngModel)],将输入框中的数据绑定到 parentData
变量上。
在父组件的模板中,使用子组件并传递 parentData
变量作为子组件的 childData
输入属性。
在子组件中,使用 @Input()
装饰器来接收父组件传递过来的数据,并显示在子组件的模板中。
通过以上步骤,父组件的输入框中输入的数据会传递给子组件,并在子组件中显示出来。