Question

我想知道是否可以在组件中使用Observable，以及其他组件可以订阅？

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

所以，远远超过了订阅＆＃39;从BugListComponent调用.next时，BugListContainerComponent似乎没有受到影响。

以下是概述图片：

我错过了什么？谢谢！

Answer 1

事实上，这是不可能的。您只能使用定义为子组件EventEmitter的{{1}}类将事件触发到组件的父组件。

对于其他组件，您需要在共享服务中定义@Ouput。组件可以注入此服务并在observable上进行订阅。另一个组件也可以注入服务并触发事件。

它与您的代码几乎相同，但在服务服务中。

共享服务
```
Observable
```

引导时定义服务

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

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

<强> BugListContainerComponent

bootstrap(AppComponent, [ SharedService ]);

<强> BugListComponent

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

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

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

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 - 在组件中使用Observable将值发送到其他组件

2 个答案: