在Angular中,可以使用@Output装饰器和EventEmitter类来发送一个值。下面是一个示例:
在组件中定义一个输出属性和一个事件发射器:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`,
})
export class ChildComponent {
@Output() valueEmitter = new EventEmitter();
sendValue() {
const value = 'Hello World';
this.valueEmitter.emit(value);
}
}
在父组件模板中使用子组件,并监听子组件的输出事件:
在父组件中定义一个处理方法来接收从子组件发出的值:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
{{ receivedValue }}
`,
})
export class ParentComponent {
receivedValue: string;
handleValue(value: string) {
this.receivedValue = value;
}
}
当子组件的按钮被点击时,它将发出一个值,并被父组件的handleValue方法捕获并赋值给receivedValue属性。父组件的模板中的paragraph标签将显示这个值。