web-dev-qa-db-ja.com

Angular 2セッターとゲッター

さまざまなルートのさまざまなコンポーネントへのデータを解析するサービスを作成しようとしています。

同じコンポーネントでfollowサービスを呼び出すと、必要な結果が得られますが、別のコンポーネントから設定結果を取得しようとすると、サービスは未定義を返します。

これが私のサービスです:-

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

@Injectable()
export class TestService {

  public _test:any;

  set test(value:any) {
    this._test = value
  }

  get test():any {
    return this._test;
  }
}

私はサービスを次のように設定しました:-

this.testService.test = 3;

そして、私は以下を使用して私のコンポーネントでサービスデータを受け取ります:-

console.log(this.testService.test)

前に述べたように、同じコンポーネント内で通信している場合、これはまったく問題なく機能しますが、同じインポート、プロバイダー、およびコンストラクターを持っています。

また、コンポーネントは兄弟コンポーネントです。

誰かが私を助けたり、正しい方向に向けたりすることができれば、それは非常に高く評価されます。

追加のコードが必要な場合はお知らせください。

5
Tony Hensler

親コンポーネントの子ではないコンポーネント間でサービスを共有する場合は、コンポーネントではなくモジュールにサービスを登録する必要があります。コンポーネント内でサービスを登録すると、そのコンポーネントとその子だけが利用できます。

このようなもの:

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    StarComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [ TestService ],
  bootstrap: [AppComponent]
})
export class AppModule { }
8
DeborahK

異なるモジュールの2つのコンポーネント間でやり取りしようとしている場合は、サービスをアプリモジュール(つまりメインモジュール)にインポートする必要があります。このようにして、getメソッドは戻りません。

1
arun kumar

未定義の変数が"testService"の場合に機能するComponent.tsのコンストラクター内で、このコードのようにtestService変数を初期化してみてください。

constructor (private testService : TestService ){
      //at this time testService its already initialized.
     console.log(this.testService.test);
}
0
Abel Valdez