要解决Angular子组件不向父组件发出结果的问题,可以使用Angular的@Output装饰器和EventEmitter来实现。
下面是一个示例代码:
在父组件中,定义一个接收子组件结果的方法,并将其绑定到子组件的事件上:
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
子组件结果:{{ childResult }}
`
})
export class ParentComponent {
childResult: string;
handleResult(result: string) {
this.childResult = result;
}
}
在子组件中,使用@Output装饰器和EventEmitter来定义一个发出结果的事件:
// 子组件
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`
})
export class ChildComponent {
@Output() result: EventEmitter = new EventEmitter();
sendResult() {
const result = '这是子组件的结果';
this.result.emit(result);
}
}
在父组件的模板中,通过使用子组件的(result)事件来调用父组件的handleResult方法,并将子组件发出的结果赋值给父组件的childResult属性,在父组件的模板中显示出来。
通过这种方式,子组件就可以向父组件发出结果了。