Угловой 2 - Использование наблюдаемых в компоненте для испускания значений другим компонентам

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

Так , далеко «подписка» в BugListContainerComponent, похоже, не затрагивается, когда e .next вызывается из BugListComponent.

Ниже приведен обзор изображения:

Что мне не хватает? Спасибо!

Answer 1

На самом деле это невозможно. Вы можете инициировать события только для родительского компонента компонента, используя класс EventEmitter, определенный как дочерний компонент @Ouput.

Для других компонентов вам необходимо определить Observable в рамках общей услуги. Компонент может вводить эту услугу и подписываться на наблюдаемые. Другой компонент может также ввести службу и запустить событие.

Это почти тот же код, что и у вас, но в сервисной службе.

• Shared служба

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