zoukankan      html  css  js  c++  java
  • Angular发送广播和接收广播

    home.module.ts

    import {BroadcastService} from "../broadcast.service";
    @NgModule({
    imports: [
    ],
    declarations: [
    ],
    entryComponents: [
    ],
    providers: [BroadcastService],//全局提供BroadcastService
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class GatewayPortalHomeModule {
    }
    /*发送广播Service*/
    BroadcastService.component.ts
    import {Injectable, EventEmitter} from "@angular/core";
    @Injectable()
    export class BroadcastService {

    constructor() {}

    eventbus: EventEmitter<any> = new EventEmitter<any>();
    }
    /*发送广播组件*/
    broadcast.component.ts
    import {BroadcastService} from "../broadcast.service";
    @Component({
    selector: 'jhi-broadcast',
    templateUrl: './broadcast.component.html',
    styleUrls: ['./broadcast.component.css'],
    providers: [],
    })
    export class BroadcastComponent implements OnInit {
      constructor(public broadcastService: BroadcastService){}//BroadcastService只注入不提供(providers)
      ngOnInit() {}
      send(){//发送广播事件
         this.broadcastService.eventbus.emit({msg: 'reload'})//发送广播

    }
    /*接收广播组件*/
    receive.component.ts
    import {BroadcastService} from "../broadcast.service";
    @Component({
    selector: 'jhi-receive',
    templateUrl: './receive.component.html',
    styleUrls: ['./receive.component.css'],
    providers: [],
    })
    export class ReceiveComponent implements OnInit,OnDestroy {
      testSub: any;
      constructor(public broadcastService: BroadcastService){//BroadcastService只注入不提供(providers)
          this.testSub = this.broadcastService.eventbus.subscribe((event) => {//接收广播-----最好放在构造方法里
               if(event.msg=="reload"){
    //接收广播后做代码逻辑处理
    }
    });
      }
      ngOnInit() {
      }
      ngOnDestroy() {
    this.testSub.unsubscribe();//取消订阅
    }

    }


  • 相关阅读:
    mysql官网下载yum
    zookeeper和kafka的leader和follower
    查看目标端口是否被占用
    scala中的val,var和lazy
    scala的异常处理try catch
    Navicat总是提示主键不存在问题
    idea常用快捷键
    wiremock技术入门
    Liunx常用操作(11)-VI编辑器-末行模式命令
    Liunx常用操作(十)-VI编辑器-命令模式命令
  • 原文地址:https://www.cnblogs.com/zxg-6/p/8533256.html
Copyright © 2011-2022 走看看