0

を使用しAngular v2.1ています。共有サービスを介してコンポーネントにメッセージを送信させようとしています。

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

どこに問題があるのか​​正確にはわかりません (データの送受信中の場合)。受信データをデバッグすると、Subscriber オブジェクトが見つかりました。

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

でmodal.service.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);
  }
}

最初のコンポーネントでcompany.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");
  }
}

2 番目のコンポーネントmodal.component.ts:

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

1 に答える 1

3

両方のコンポーネントが宣言します

providers: [
    ModalService
]

したがって、彼らはサービスを共有しません。どちらも独自の ModalService インスタンスを持っています。それがプロバイダーの目的です。

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

また、 にコールバックを渡さないことに注意してください。そのsubscribe()ため、同じサービスの共有を開始しても何も起こりません。

于 2016-11-07T22:44:30.313 に答える