Angular 2 - Using Observables in a component to emit values to other components

问题

I am wondering if it is possible to use Observables in components, and which other components can subscribe to?

BugListComponent - component is injected in the boot.ts file where I load all my services (where boostrap is located)

import {Subject, BehaviorSubject} from 'rxjs/Rx';

viewBugList$: Subject<boolean>;

constructor() { 
    this.viewBugList$ = new BehaviorSubject<boolean>(false);
}

// Called from template, sends in 'true'
private enableIEview(enable: boolean) {   
    if(enable) {
        this.viewBugList$.next(true);
    }
}

BugListContainerComponent

import {BugListComponent} from '../buglist/bug-list.component';

initView: boolean;

constructor(private _bugListComp: BugListComponent) {
    this.initView = false;
}

ngOnInit() {
    this._bugListComp.viewBugList$.subscribe(e => {
        if(e != null) {
            this.initView = e;
        }
    });
}

So, far the 'subscribe' in the BugListContainerComponent does not seem to be affected when the .next is called from the BugListComponent.

Below is an overview image:

What am I missing? Thanks!

回答1:

In fact it's not possible. You can only trigger events to the parent component of a component using the EventEmitter class defined as @Ouput of the child component.

For other components, you need to define the Observable within a shared service. The component can inject this service and subscribe on the observable. The other component can also inject the service and trigger the event.

It's almost the same code as yours but in a service service.

Shared service

export class SharedService {
  constructor() { 
    this.viewBugList$ = new BehaviorSubject<boolean>(false);
  }

  enableView() {
    this.viewBugList$.next(true);
  }
}

Define the service when bootstrapping

bootstrap(AppComponent, [ SharedService ]);

BugListContainerComponent

constructor(private service: SharedService) {
  this.initView = false;
}

ngOnInit() {
  this.service.viewBugList$.subscribe(e => {
    if(e != null) {
      this.initView = e;
    }
  });
}

BugListComponent

viewBugList$: Subject<boolean>;

constructor(private service:SharedService) { 
  this.viewBugList$ = new BehaviorSubject<boolean>(false);
}

// Called from template, sends in 'true'
private enableIEview(enable: boolean) {   
  if(enable) {
    this.service.viewBugList$.next(true);
  }
}

This shared service must be defined when bootstrapping your application in order to have a single instance for the whole application.

回答2:

BugListComponent

import 'rxjs/Rx';
import {Output,EventEmitter} from 'angular2/core';
import {sharedService} from './sharedService';


constructor(private ss:sharedService) { 

}

private enableIEview(enable: boolean) {   
    if(enable) {
        this.ss.setEventEmitter(enable);
    }
}

sharedService.ts

import 'rxjs/Rx';
import {Output,EventEmitter} from 'angular2/core';

export class sharedService {

@Output() viewBugList$:EventEmitter<boolean>=new EventEmitter();

  constructor() { 

  }

  setEventEmitter(enable:boolean) {
    //this.viewBugList$.emit(enable);
      this.viewBugList$.next(enable);
  }

  getEventEmitter()
  {
     return this.viewBugList$;
  }
}

boot.ts

import {sharedService} from './sharedService';
bootstrap(AppComponent, [ SharedService ]);

BugListContainerComponent

import 'rxjs/Rx';
import {Output,EventEmitter} from 'angular2/core';
import {sharedService} from './sharedService';

initView: boolean;

constructor(private ss:shareService) {
    this.initView = false;
}

ngOnInit() {
    this.ss.getEventEmitter.subscribe(e => {
        if(e != null) {
            this.initView = e;
        }
    });
}

来源：https://stackoverflow.com/questions/36283803/angular-2-using-observables-in-a-component-to-emit-values-to-other-components

标签

asynchronous

angular

reactive-programming

observable