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: [
AppComponent
]
})
export class AppModule {
}
3、定义组件,发射消息
import {Component} from '@angular/core';
import {EmitService} from "./emit.service"
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public emitService: EmitService) {
}
emitFun() {
this.emitService.eventEmit.emit("userList");
}
}
4、定义接收组件,接收比对发射的字符串,判断,调取接口,刷新组件内容
import {Component, OnInit} from "@angular/core";
import {EmitService} from "./emit.service"
@Component({
selector: "event-emit",
templateUrl: "./emit.component.html"
})
export class EmitComonent implements OnInit {
constructor(public emitService: EmitService) {
}
ngOnInit() {
this.emitService.eventEmit.subscribe((value: any) => {
if(value == "userList") {
alert("收到了,我立马刷新列表");
}
});
}
}