Angular 2 - Verwenden von Observablen in einer Komponente zum Ausgeben von Werten an andere Komponenten

Question

Ich frage mich, ob es möglich ist, Observables in Komponenten zu verwenden, und welche anderen Komponenten können sie abonnieren?

BugListComponent - Komponente in den boot.ts injiziert Datei, wo ich alle meine Dienste laden (wo Bootstrap befindet)

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 , weit die 'subscribe' in der BugListContainerComponent scheint nicht betroffen zu sein, wenn th e.next wird von der BugListComponent aufgerufen.

Es folgt eine Übersicht Bild:

Was bin ich? Danke!

Answer 1

In der Tat ist es nicht möglich. Sie können Ereignisse nur für die übergeordnete Komponente einer Komponente auslösen, indem Sie die EventEmitter-Klasse verwenden, die als @Ouput der untergeordneten Komponente definiert ist. Für andere Komponenten müssen Sie Observable in einem gemeinsam genutzten Dienst definieren. Die Komponente kann diesen Service injizieren und auf dem Observable subskribieren. Die andere Komponente kann auch den Dienst einspeisen und das Ereignis auslösen.

Es ist fast der gleiche Code wie bei Ihnen, aber in einem Service-Service.

• Shared Service

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

• den Dienst definieren, wenn

  bootstrap(AppComponent, [ SharedService ]); 
  

• BugListContainerComponent

  Bootstrapping

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

Dieser Shared-Service muss definiert werden, wenn die Anwendung, um Bootstrapping eine einzelne Instanz für die gesamte Anwendung zu haben.

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