2016-11-07 3 views
0

Angular v2.1を使用しています。コンポーネントを共有サービス経由で送信するようにしています。Angular2(最終リリース)のコンポーネントがサービスで観測可能な状態で通信できない

まず、最初のコンポーネントcompany.component.tsから2番目のコンポーネントmodal.component.tsにデータを送信します。

どこに問題があるのか​​よく分かりません(データを送信または受信している場合)。第二成分modal.component.ts

import { ModalService } from './modals/modal.service'; 
@Component({ 
    templateUrl: 'company.component.html', 
    providers: [ 
     ModalService 
    ] 
}) 
export class CompanyComponent implements OnInit { 
    constructor(private missionService: ModalService) { 
    this.missionService.setCompany("hellooooooooooooooo"); 
    } 
} 

:第一成分company.component.ts

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class ModalService { 
    private sharedCompanySource = new Subject<string>(); 

    sharedCompany = this.sharedCompanySource.asObservable(); 

    getCompany(){ 
    return this.sharedCompany; 
    } 

    setCompany(_company: any){ 
    this.sharedCompanySource.next(_company); 
    } 
} 

modal.service.ts

Subscriber {closed: false, syncErrorValue: null, syncErrorThrown: false, syncErrorThrowable: false, isStopped: false…} 

:Iは、受信データをデバッグするときに、Iは、加入者オブジェクトが見つかりました:

import { ModalService } from './modals/modal.service'; 
import { Subscription }   from 'rxjs/Subscription'; 
@Component({ 
    templateUrl: 'modal.component.html', 
    providers: [ 
     ModalService 
    ] 
}) 
export class ModalComponent implements OnInit { 
    subscription:Subscription; 
    constructor(private missionService: ModalService) { 
    this.subscription = missionService.sharedCompany.subscribe(); 
    } 
} 

答えて

3

両方のコンポーネントは

providers: [ 
    ModalService 
] 

を宣言そこで彼らは、サービスを共有することはありません。どちらもModalServiceの独自のインスタンスを持っています。それがプロバイダーのためのものです。

共有サービスが必要な場合は、そのサービスを親NgModuleのプロバイダで宣言します。

subscribe()にコールバックを渡すことはないので、同じサービスの共有を開始するときには何も起こりません。

+0

どのように動作するか見てみましょう。 :) –

+0

https://angular.io/docs/ts/latest/guide/ngmodule.html#!#providers –

+0

私は最後にそれを観察できないようにしました(単純なattributsとsetters、gettersのみ) –

関連する問題