角度のサービス（サービス）

当局は、彼らがサービスに存在するデータ、データ・アクセスおよび代理人の責任に焦点を当てる必要があり、部品が直接取得したり、セーブデータはならないと考えています。サービスは、データアクセスロジック処理機能として働きます。モジュール性と再利用性を向上させるために、コンポーネントおよびサービスエリアを分離します。アセンブリおよび関連する機能は、処理の他のタイプから分離表示することにより、コンポーネントのクラスは、公式の定義であり、より合理化及び効率化することができます。非常にアイデンティティ、ビューの個人的な開発経験I下品なポイント、実際の開発ではなく、完全に独立したコンポーネントとサービスエリアへ。そして、データのみの構成要素を示す、サービスに配置されているコンポーネント、または論理処理に特化したサービスを提供していません。モジュールは通常、当社の各事業は、唯一のサービスモジュール、データ・アクセス・モジュール、データ処理の判断、唯一のサービスに共通のアプローチがあり、多くのコンポーネントがあります。コンポーネントは、まだ論理ページを実証するというように、いくつかの判定データを持っています。もちろん、我々はまた、各コンポーネントの用途に利用可能なサービスを持っている、などのHTTPService logService uiServicなどなど、いくつかの一般的なサービスを提供しています。私は、ビジネスサービスが完全にそれを剥奪することができないの罰金であると言うかもしれません。

1.依存性注入

インジェクタは、主要なメカニズムです。アンギュラは、起動時に完全なアプリケーション・レベルのインジェクタとあなたのために必要な他のインジェクタを作成します。あなたはあなた自身のインジェクターを作成する必要はありません。
インジェクタは、これらの依存関係を管理し、可能な限り再利用するために、コンテナを維持し、依存関係を作成します。
プロバイダは、取得したり、依存関係を作成する方法をインジェクタを伝えるために使用されるオブジェクトです。

2.サービスプロバイダ

我々は、参加者の依存性注入システムの一つとしてマークこのクラス@Injectable（）デコレータを、見ることができる、新しいサービスでは、サービスを作成SERVICENAMEコマンドngのGSを使用します。サービス・コンポーネントを使用するためにどのようにサービスを利用できるようにするサービス依存性注入システム、コンポーネントまたはモジュール、でなければなりません。我々は使用することができます登録されているプロバイダやルートをインジェクタ達成します。

サービス自体は作成して追加するクラスCLIで @Injectable() デコレータを。デフォルトでは、デコレータが使用されている providedIn プロパティを設定するには、それはそのサービスのプロバイダを作成します。この例では、providedIn: 'root' ルートを指定する角度を達成するために、インジェクタにサービスを提供しなければならないルートインジェクタサービスが注入され、それはアプリケーション全体で使用することができます。

testService.ts

インポート{注射} から 「@角度/コア」。

@Injectable（{ providedIn：
  'ルート' 、
}）
エクスポートクラスTestService { 
}

あなたはまた、このモジュールだけに適用されるサービスモジュールは、このモジュールのサービスに属する大学に似ている、唯一の特定のモジュールでサービスを提供するように指定することができ、我々はそれを行うことができます。

インポート{注射} から 「@角度/コア」。
インポート{TestModule} から ' ./test.module ' 。

@Injectable（{   providedIn：TestModule、 
}）
エクスポート
クラスTestService { 
}

若しくは

インポート{NgModule} から 「@角度/コア」。
インポート{TestService} から ' ./test.service ' 。

@NgModule（{ 
  プロバイダ：[TestService] 
}）
エクスポートクラスTestModule { 
}

サービスは、コンポーネント内に直接注入することができます。

@Component（{
 / * 。。。* / 
  プロバイダ：[TestService] 
}）

サービスの3.適用範囲

なぜそれがサービスされ、注入のいくつかの方法がありますが何か違いはあります。これは、境界がサービスを利用するために定義された場所に作用するサービスです。ルートは、アプリケーション全体で使用することができるサービス手段注入我々は、モジュール内に注入、モジュールは、アセンブリ内に注入、塗布することができる場合にのみ、このコンポーネントに適用されます。我々はパフォーマンスを改善するための適切な注入方法を選択するために、サービスの定義に従って機能します。

例4.シングルサービス

サービスメソッドシングルトンの提供：

プロパティ宣言しました。@Injectable()providedInroot

インポート{注射} から 「@角度/コア」。

@Injectable（{ 
  providedIn：' ルート' 、
}）
エクスポートクラスTestService { 
}

これは、サービスに含まれている AppModule かのみとなります AppModule インポートされたモジュール。

@NgModule（{ 
  ... 
  プロバイダ：[TestService]、
  ... 
}）

forRoot（）モード

モジュールは、両方のプロバイダ（サービス）を定義した場合は、複数の機能モジュールにこのモジュールをロードする際に、これらのサービスは、複数の場所に登録されます。これは、インスタンスが表示されず、サービスの振る舞いは、もはや単独の場合と同じである複数のサービスにつながります。この現象を防ぐために、いくつかの方法があります。

ちなみにprovidedInではなく、モジュールの登録サービスでのシンタックス。
自分自身のモジュールにあなたのサービスを分離します。
ForRootは、モジュール（）とforChild（）メソッドで定義されています。

使用forRootは（）を使用すると、ルートモジュールをインポートすることができるように、モジュールからモジュールに、プロバイダから分離したときにサブモジュールでそれを導入することなく、テーププロバイダ、およびプロバイダ。

PS： RouterModule なし forRoot()

GreetingModule.ts

静的forRoot（設定：TestServiceConfig）：ModuleWithProviders {
   リターン{ 
    ngModule：GreetingModule、
    プロバイダ：[ 
      {提供する：TestServiceConfig、useValue：設定} 
    ] 
  }。
}

インポートGreetingModuleは、とだけでAppModuleにおけるそれのforRoot一度（）メソッドと呼ばれます。あなたが表示される複数のインスタンスを防ぐことができたら、このようにそれを登録します。

インポート{BrowserModule} から 「@角度/プラットフォームブラウザ」。
インポート{NgModule} から 「@角度/コア」。

/ * アプリルート* / 
インポート{AppComponent} から ' ./app.component ' 。

/ * 機能モジュール* / 
インポート{ContactModule} から ' ./contact/contact.module ' 。
インポート{GreetingModule} から ' ./greeting/greeting.module ' 。

/ * ルーティングモジュール* /
インポート{AppRoutingModule} から ' ./app-routing.module ' 。

@NgModule（{ 
  輸入：[ 
    BrowserModule、
    ContactModule、
    GreetingModule.forRoot（{ユーザー名：' マープル' }）、
    AppRoutingModule 
  ]、
  宣言：[ 
    AppComponent 
  ]、
  ブートストラップ：[AppComponent] 
}）
エクスポートクラス AppModule {}

どのように動作します：

では GreetingModule.ts 、中央、我々は、それを見ることができるための構成を追加する方法、オプションのインプラントのテストは、テストを拡大しました。テストした場合に存在し、この設定からユーザー名を設定します。UserServiceforRoot()ServiceConfigServiceServiceConfig

test.service.ts（コンストラクタ）

content_copyconstructor（@optional（）設定：テストServiceConfig）{
   場合（設定）{ この ._userName = config.userName。} 
}

どのように効果的に繰り返し輸入を防ぐために：

GreetingModuleをインポートするための唯一のルートモジュールAppModule。ロードモジュールはまた、不活性導入した場合には、サービスのためのアプリケーションの複数のインスタンスを生成します。

するには GreetingModule コンストラクタを追加し、コンストラクタはGreetingModuleは、それ自体を注入角度が必要です。現在の注入GreetingModuleの角に見える場合は、注入は無限ループになりますが、@SkipSelf（）デコレータ手段「インジェクタレベルのツリーが高い、私の先祖よりもインジェクタGreetingModuleを検索します。」、缶効果的に繰り返されるの導入を防ぎます。

greeting.module.ts

インポート{ModuleWithProviders、NgModule、オプション、SkipSelf} から ' 角度/コア@ ' 。
インポート{CommonModule} から 「@角度/共通」。
インポート{GreetingComponent} から ' ./greeting.component ' 。
インポート{UserServiceConfig} から ' ./user.service ' 。

@NgModule（{ 
  輸入：[CommonModule]、
  宣言：[GreetingComponent]、
  輸出：[GreetingComponent] 
}）
エクスポートクラスGreetingModule {
  コンストラクタ（@optional（）@SkipSelf（）parentModule：GreetingModule）{ 
    場合（parentModule）{
       スロー 新しいエラー（
         ' のみAppModuleでGreetingModuleがすでにロードされているインポート、それを。' ）; 
    } 
  } 

  静的forRoot（設定：UserServiceConfig）：ModuleWithProviders {
     リターン{ 
      ngModule：GreetingModule、
      プロバイダ：[ 
        {提供する：UserServiceConfig、useValue：設定} 
      ] 
    }。
  } 
}

これは、任意の質問は以下のコメントを喜ば場合は、エッセイI研究と作業記録で再現、ソースを明記してください。

それが助け場合は、あなたに私に賞賛を与えるために右下にマウスを移動してください、あなたのサポートが私の最大の動機です。