Angular 2 - 在组件中使用 Observables 向其他组件发送值

Question

我想知道是否可以在组件中使用 Observables，还有哪些组件可以订阅？

BugListComponent - 组件被注入到我加载所有服务的 boot.ts 文件中（boostrap 所在的位置）

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

因此，当从 BugListComponent 调用 .next 时，BugListContainerComponent 中的 'subscribe' 似乎没有受到影响。

下面是概览图：

我错过了什么？谢谢！

Answer 1

事实上这是不可能的。只能使用子组件的EventEmitterclass定义为@Ouput的组件的父组件触发事件。

对于其他组件，您需要在共享服务中定义 Observable。该组件可以注入此服务并订阅可观察对象。其他组件也可以注入服务并触发事件。

和你的代码几乎一样，只是在服务服务中。

共享服务

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

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

在引导时定义服务

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

必须在引导应用程序时定义此共享服务，以便为整个应用程序提供一个实例。

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

Angular 2 - 在组件中使用 Observables 向其他组件发送值

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

asynchronous

reactive-programming

observable

angular