Angular 2 で他のサービスにサービスを挿入するにはどうすればよいですか?

Angular 2 (ベータ) での他のサービスへのサービスの挿入

コンポーネントへのサービスの挿入は、@Component デコレーターを使用することで簡単に行えます。ただし、コンポーネントの外にサービスを挿入すると、問題が発生します。

問題ステートメント

Angular 2 では、次のように、他のサービス内でサービスを手動でインスタンス化することは避けたいと考えています。次のコード スニペット:

export class MyFirstSvc {

}

export class MySecondSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

export class MyThirdSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

ソリューション

この解決策には、注入するサービスで @Injectable デコレータを使用することが含まれます。このデコレーターは、依存関係注入用のサービスのコンストラクター パラメーターを準備します。

インジェクター階層

注入がどのように機能するかを理解するには、インジェクター階層の概念を理解することが不可欠です。

• アプリケーション インジェクター: ブートストラップ関数の 2 番目のパラメーターを使用して構成されます。
• コンポーネント インジェクター: のプロバイダー属性を使用して構成されます。成分。親インジェクターで定義されたプロバイダーを参照できます。

コンポーネントまたは別のサービスにサービスを挿入するとき、Angular2 は次の順序でプロバイダーを検索します:

1. コンポーネントインジェクター
2. AppComponent インジェクター
3. アプリケーション インジェクター

プロバイダー共有

インジェクター階層により、サービス インスタンスの制御された共有が可能になります:

• アプリケーション レベル プロバイダ: アプリケーション全体で共有されます。
• コンポーネント レベル プロバイダ: コンポーネント内で共有されます。

例

@Injectable()
export class Service1 {
  constructor(service2:Service2) {
    this.service2 = service2;
  }

  getData() {
    return this.service2.getData();
  }
}

@Injectable()
export class Service2 {

  getData() {
    return [{ message: 'message1' }, { message: 'message2' }];
  }
}

この例では:

• Service1 は Service2 に依存します。
• ChildComponent で Service1 をインスタンス化するとき、Angular2 はまず ChildComponent インジェクターで Service1 を検索し、次に AppComponent インジェクターで、最後に Application インジェクターで Service1 を検索します。
• 同様に、Service1 内で Service2 をインスタンス化する場合、Angular2 は同じ階層に従います。
• インジェクター階層とプロバイダーの配置により、アプリケーションのニーズに基づいて柔軟な依存関係の共有が可能になります。

リソース

• [Angular2 階層依存関係注入ガイド](https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html)
• [ Plunkr の例](https://plnkr.co/edit/PsySVcX6OKtD3A9TuAEw?p=preview)

以上がAngular 2 で他のサービスにサービスを挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。