angular中EventEmitter跨组件通信

最新推荐文章于 2023-02-09 18:11:02 发布

Big老爹

最新推荐文章于 2023-02-09 18:11:02 发布

阅读量1.7k

点赞数

文章标签： html js javascript typescript angular

本文链接：https://blog.csdn.net/lc905786133/article/details/120545202

版权

本文介绍了在Angular应用中如何通过EventEmitter实现跨组件通信。详细步骤包括创建服务，配置module.ts，定义发射事件的组件以及接收并响应事件的组件。使用EventEmitter可以避免@Output/@Input在组件层次较深时的局限性，轻松刷新相关组件数据。

摘要由CSDN通过智能技术生成

注意：现在的场景是这样的，界面是由N多个组件组成的，如果一个组件中修改了接口的内容，其他组件需要调接口刷新数据，那么就用到了EventEmitter
1、创建服务，new一个EventEmitter
import {Injectable, EventEmitter, OnInit} from “@angular/core”;
@Injectable()
export class EmitService implements OnInit {
public eventEmit: any;

constructor() {
// 定义发射事件
this.eventEmit = new EventEmitter();
}

ngOnInit() {

}
}
2、配置module.ts
import {BrowserModule} from ‘@angular/platform-browser’;
import {NgModule} from ‘@angular/core’;

import {AppComponent} from ‘./app.component’;
import {EmitComonent} from “./emit.component”;
import {EmitService} from “./emit.service”;

@NgModule({
declarations: [
AppComponent,
EmitComonent
],
imports: [
BrowserModule
],
providers: [
EmitService
],
bootstrap: [