在 Angular 12 中,@Input和@Output 装饰器用于在组件之间传递数据和事件。如果这些装饰器无法正常工作,可能是由于以下几个原因:
确保导入正确的装饰器:
检查变量命名是否正确:
以下是一个示例解决方法,其中包含了一个父组件和一个子组件,父组件通过 @Input 将数据传递给子组件,子组件通过 @Output 发送事件给父组件:
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: `
`
})
export class ParentComponent {
data = 'Hello World';
handleEvent(event: any) {
console.log(event);
}
}
子组件:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child-component',
template: `
`
})
export class ChildComponent {
@Input() inputData: string;
@Output() outputEvent = new EventEmitter();
emitEvent() {
this.outputEvent.emit('Event emitted from child component');
}
}
确保以上代码中的组件正确导入,并在需要使用它们的模块中进行声明和引用。如果仍然无法正常工作,请检查控制台是否有其他错误消息,以便更好地定位和解决问题。