问题可能是由于在模板中,绑定到click
事件的处理程序未能正确获取父组件中的值。解决此问题的方法是使用箭头函数来确保正确地绑定到父组件。
例如父组件的模板代码如下:
这里的箭头函数 handleClick()
不能正确获取 parentValue
的值,因为它没有正确绑定到父组件中。正确的方法是将 handleClick()
修改为一个箭头函数,如下所示:
handleClick = () => {
console.log(this.parentValue);
};
这样,箭头函数 handleClick()
将正确绑定到父组件中,并能够正确获取 parentValue
的值。
完整的代码示例:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent {
parentValue = 'I am from parent';
onOutputValue(event: any) {
console.log(event);
}
handleClick = () => {
console.log(this.parentValue);
};
}
子组件:
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-child',
template: `
{{ value }}
`,
})
export class ChildComponent {
@Input() value: string = '';
@Output() outputValue = new EventEmitter();
handleClick() {
this.outputValue.emit('I am from child');
}
}