1. 程式人生 > >Angular廣播/訊息通知的接收與傳送

Angular廣播/訊息通知的接收與傳送

一、在接收頁:
新增引用: private eventManager: JhiEventManager;

接收通知的方法:
// 接收通知(新建、編輯、刪除頁傳送過來的通知) // upmsMenuListModification 接收的內容(隨意) registerChangeEvent() { this.eventSubscriber = this.eventManager.subscribe('upmsMenuListModification', response => this.loadAll()); } 備註:記得在頁面開始事件中新增接收通知的方法

二、在傳送通知頁: 新增引用:private eventManager: JhiEventManager
傳送通知的方法: // 傳送通知 upmsMenuListModification傳送的內容(隨意) private onSaveSuccess() { this.eventManager.broadcast({ name: 'upmsMenuListModification' }); } 以上是angular自帶的元件
下面是自己寫的辦法: 第一步:先建立一個service

import {Injectable, EventEmitter, OnInit} from "@angular/core";
@Injectable()
export class EmitService implements OnInit {
public eventEmit: any;

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

ngOnInit() {

}
}

備註:記得在Module中新增這個service的引用

第二步:

傳送通知頁:

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");
}
}

接收通知頁:

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") {
// 這裡就可以調取介面,重新整理userList列表資料
alert("收到了,我立馬重新整理列表");
}
});
}

}