Angular 2 event broadcast

前端 未结 2 830
一个人的身影
一个人的身影 2020-12-15 20:19

New to Angular 2. I\'m working on broadcast a event between same level component. Currently I know EventEmitter just can transfer a event to upper level component.

I

相关标签:
2条回答
  • 2020-12-15 20:59

    Use BehaviorSubject

    Service:

    import { Injectable } from '@angular/core';
    import {BehaviorSubject} from 'rxjs/BehaviorSubject';    
    
    @Injectable()
    export class MyService {
    
       public mySubject: BehaviorSubject<number> = new BehaviorSubject<number>(0);
    
    
       public doSomething(): void { 
          let myValue: number = 123;
          this.mySubject.next(myValue);
       }
    }
    

    Component:

    @Component({ 
      selector: 'app-my-component',
      templateUrl: './my-component.component.html',
      styleUrls: ['./my-component.component.css']
    })
    export class MyComponent {
    
       constructor(private myService: MyService) { 
            this.myService.mySubject.subscribe(
                 value => {
                    console.log(value); 
                 }
            );
       }
    
    }
    
    0 讨论(0)
  • 2020-12-15 21:04

    You just need to create some service that will emit messages on which you can subscribe. It can be Observable from rxjs, EventEmitter from node.js, or anything else that follows Observable pattern. Then you should use Dependency Injection to inject this service into concrete components. See this plunker.

    class Broadcaster extends EventEmitter {}
    
    @Component({
      selector: 'comp1',
      template: '<div>Generated number: {{ generatedNumber }}</div>',
    })
    class Comp1 {
      generatedNumber: number = 0;
    
      constructor(broadcaster: Broadcaster) {
        setInterval(() => {
          broadcaster.next(this.generatedNumber = Math.random());
        },1000);
      }
    }
    
    @Component({
      selector: 'comp2',
      template: '<div>Received number: {{ receivedNumber }}</div>',
    })
    class Comp2 {
      receivedNumber: number = 0;
    
      constructor(broadcaster: Broadcaster) {
        broadcaster.observer({
          next: generatedNumber => this.receivedNumber = generatedNumber
        });
      }
    }
    
    @Component({
      selector: 'app',
      viewProviders: [Broadcaster],
      directives: [Comp1, Comp2],
      template: `
        <comp1></comp1>
        <comp2></comp2>
      `
    })
    export class App {}
    

    PS In this example I use EventEmitter from angular2, but again, it can be whatever you want

    0 讨论(0)
提交回复
热议问题