2016-03-29 31 views
1

Observablesをコンポーネントで使用することが可能で、他のコンポーネントでサブスクライブできるかどうかは疑問です。角2 - コンポーネントのObservablesを使用して他のコンポーネントに値を出力する

BugListComponent - コンポーネントがboot.tsに注入され、私はすべての私のサービスをロードするファイル指定(ブートストラップが置かれている場所)

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の 'subscribe'はthのときには影響を受けていないようですe .nextはBugListComponentから呼び出されます。 The architecture

私は何をしないのです:

以下

は概観画像ですか? ありがとう!

答えて

2

実際は不可能です。子コンポーネントの@Ouputとして定義されたEventEmitterクラスを使用して、コンポーネントの親コンポーネントへのイベントのみをトリガすることができます。

他のコンポーネントについては、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); 
        } 
    } 
    

は、この共有サービスを定義する必要があります。

+0

なるほど、私は恐れていました。ですから、BugListCompから '@ output'をAppCompにSidebarComp経由で渡すことは可能ですか?それから、MainContainerComp経由でAppComからBugListContainerCompに '@ input'を送りますか? おそらくそれだけのサービスを作成する方が簡単です^^ あなたの素早い回答をありがとうbtw! – Sojye

+0

はい、これは可能ですが、イベントはバブルしません。したがって、各レベルで定義する必要があります。だからこれは痛いでしょう...はい、サービスを作成することは間違いなく簡単です;-) –

+0

ありがとう!これらの種類のサービスについては、非常に小さく、例えば発信するだけです。 true/falseのようないくつかの同様の状況がある場合、これらを1つのサービスで収集することは可能でしょうか?または、それぞれに1つのサービスを用意していますか? – Sojye

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; 
     } 
    }); 
} 
関連する問題