在Angular中,可以使用@Output装饰器和EventEmitter类来从指令传递数据到父组件。下面是一个示例:
在指令中定义一个输出属性,并使用EventEmitter来发出事件:
import { Directive, Output, EventEmitter } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
@Output() myEvent = new EventEmitter();
sendDataToParent() {
const data = 'Hello from directive';
this.myEvent.emit(data);
}
}
在父组件中使用指令,并监听指令的输出事件:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
Data from directive: {{ receivedData }}
`,
})
export class AppComponent {
receivedData: string;
sendDataToDirective() {
// 通过调用指令的方法来发送数据
const directive = document.querySelector('div[myDirective]');
directive.sendDataToParent();
}
handleEvent(data: string) {
this.receivedData = data;
}
}
在父组件中,我们使用handleEvent
方法来接收从指令发出的数据,并在模板中显示出来。通过调用指令的方法sendDataToParent
,可以从父组件向指令发送数据。
注意:在父组件中直接通过查询选择器document.querySelector
获取指令实例的方式仅适用于示例中的简单情况。在实际项目中,更好的做法是使用依赖注入将指令注入到父组件中。