Angular 2-在组件中使用Observables向其他组件发送值 [英] Angular 2 - Using Observables in a component to emit values to other components

问题描述

我想知道是否可以在组件中使用Observables，以及哪些其他组件可以订阅?

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

BugListComponent -在我加载所有服务( boostrap 所在的位置)的boot.ts文件中注入了组件

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

因此，到目前为止，当从BugListComponent调用.next时，BugListContainerComponent中的订阅"似乎并没有受到影响.

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

以下是概述图片:

我想念什么? 谢谢！

推荐答案

实际上是不可能的.您只能使用定义为子组件@Ouput的EventEmitter类将事件触发到该组件的父组件.

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.

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

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.

• 共享服务

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

在引导应用程序时必须定义此共享服务，以使整个应用程序具有单个实例.

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

这篇关于Angular 2-在组件中使用Observables向其他组件发送值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！