通常,可以使用表单控件的ngModel指令绑定输入值并将其传递给父组件。然而,如果在父组件中引入了另一个组件,则可能无法直接访问该输入值。解决这个问题的解决方法是使用@Input装饰器将输入属性公开给父组件。
以下是示例代码,其中ParentComponent包含一个子组件ChildComponent,然后在ChildComponent中访问其属性值。
在ParentComponent中:
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent {
parentName = 'John Doe';
}
在ChildComponent中:
@Component({
selector: 'app-child',
template: `
Hello {{ name }}!
`,
})
export class ChildComponent {
@Input() name: string;
}
在这个例子中,父组件ParentComponent将parentName属性传递给了子组件ChildComponent。使用@Input装饰器,子组件可以访问父组件传递的name属性。
当子组件渲染时,会显示“Hello John Doe!”。