Angular2共有HTTPサービス

Question

コンポーネント間でサービスを共有することについての読書や、アプリケーションコンポーネントを使用する基本的な考え方は、基本的にプロバイダとしてのサービスのシングルトンを作成することです。

コンポーネントがネストされているコンポーネントをロードし、ネストされたコンポーネントはすべてこの共有サービスを使用します。将来のイベントがページ上でトリガされ、すべてのネストされたコンポーネントのテンプレート要素を更新および更新するためにHTTPサービスが必要になります。どのようにしてこのアップデートを「強制」するのですか？

また、「root」コンポーネントが読み込まれるたびにHTTPサービスが実行されるように、アプリケーションコンポーネントでサービスを共有していたためですか？

正しく理解していませんか？私はむしろディレクティブを使うつもりですか？

Answer 1

更新：私はこの週末に一緒に何かを入れる時間がありませんでしたが、事がまだ明確でない場合は、a simplified example to show how service injection works in Angular 2を作った。

AppComponentはAppServiceを@Componentデコレータのプロバイダとしてリストします。つまり、サービスのシングルトンがこのコンポーネントレベルで注入されます。 ChildComponentでは、サービスがAppComponentに注入された同じインスタンスを使用するため、サービスをプロバイダとしてリストする必要はありません。 AppServiceモジュールをインポートしてコンストラクタにサービスを注入するだけです。

逆に、IsolatedComponentはAppServiceの別のインスタンスを使用しているため、@Componentデコレータのproviders配列を介して新しいシングルトンインスタンスを挿入します。 IsolatedChildComponentは、IsolatedComponentで使用されているのと同じサービスインスタンスを使用します.ChildComponentと同様に、AppServiceモジュールをインポートしてそのコンストラクタ定義にインスタンスを挿入するだけです。

コンポーネントが初期化されるたびに、各コンポーネントが共有バインディングプロパティ、メッセージをどのように更新し、子コンポーネントがこれらの更新を自動的に取得するかに注目してください。同じロジックをAPI呼び出しを行うサービスに適用できます。ここ

は、サービスおよびコンポーネントのコードである：

app.service.ts

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

@Injectable() 
export class AppService { 
    messages: string[] = []; 

    updateMessages(msg: string) { 
    this.messages.push(msg); 
    } 
} 

app.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AppService } from './app.service'; 
import { ChildComponent } from './child.component'; 
import { IsolatedComponent } from './isolated.component'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>AppComponent Tree</h1> 
    <p> 
    AppComponent and ChildComponent consume the same instance of AppService 
    </p> 
    <child-component></child-component> 
    <hr /> 
    <isolated-component></isolated-component> 
    `, 
    providers: [AppService], 
    directives: [ChildComponent, IsolatedComponent] 
}) 
export class AppComponent implements OnInit { 
    messages: string[]; 

    constructor(private appService: AppService) { 
    this.messages = appService.messages; 
    } 

    ngOnInit() { 
    this.addMessage(`AppComponent Initialized`); 
    } 

    private addMessage(msg: string) { 
    this.appService.updateMessages(msg); 
    } 
} 

child.component .ts

import { Component, OnInit } from '@angular/core'; 
import { AppService } from './app.service'; 

@Component({ 
    selector: 'child-component', 
    template: ` 
    <div *ngFor="let message of messages">{{message}}</div> 
    ` 
}) 
export class ChildComponent implements OnInit { 
    messages: string[]; 

    constructor(private appService: AppService) { 
    this.messages = appService.messages; 
    } 

    ngOnInit() { 
    this.addMessage(`ChildComponent Initialized`); 
    } 

    private addMessage(msg: string) { 
    this.appService.updateMessages(msg); 
    } 
} 

isolated.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AppService } from './app.service'; 
import { IsolatedChildComponent } from './isolated-child.component'; 

@Component({ 
    selector: 'isolated-component', 
    template: ` 
    <h1>Isolated Component Tree</h1> 
    <p> 
    IsolatedComponent and IsolatedChildComponent consume an 
    instance of AppService separate from the AppComponent tree 
    </p> 
    <isolated-child></isolated-child> 
    `, 
    providers: [AppService], 
    directives: [IsolatedChildComponent] 
}) 
export class IsolatedComponent implements OnInit { 
    messages: string[]; 

    constructor(private appService: AppService) { 
    this.messages = appService.messages; 
    } 

    ngOnInit() { 
    this.addMessage(`IsolatedComponent initialized`); 
    } 

    private addMessage(msg: string) { 
    this.appService.updateMessages(msg); 
    } 
} 

孤立child.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AppService } from './app.service'; 

@Component({ 
    selector: 'isolated-child', 
    template: ` 
    <div *ngFor="let message of messages">{{message}}</div> 
    ` 
}) 
export class IsolatedChildComponent implements OnInit { 
    messages: string[]; 

    constructor(private appService: AppService) { 
    this.messages = appService.messages; 
    } 

    ngOnInit() { 
    this.addMessage(`IsolatedChildComponent initialized`); 
    } 

    private addMessage(msg: string) { 
    this.appService.updateMessages(msg); 
    } 
} 

Hierarchical Injectorsマニュアルを参照してください。