Angular2共享HTTP服務

Question

我已經完成了關於在組件之間共享服務的一些閱讀，以及使用應用程序組件的基本思想，我的理解是本質上創建服務的單例作爲提供程序。

我加載了一個具有嵌套組件的組件，嵌套組件都使用這個共享服務。將來會觸發頁面上的事件，現在我需要HTTP服務來更新和更新所有嵌套組件模板元素。我該如何「強制」更新？

此外，這是否意味着因爲我共享應用程序組件中的服務，HTTP服務將在頁面「root」組件加載時運行？

還是我不正確理解？我的意思是使用指令嗎？

Answer 1

更新：我沒有時間把這個週末放在一起，但是如果事情還不清楚，我做了a simplified example to show how service injection works in Angular 2。

AppComponent將AppService列爲@Component裝飾器中的提供者，這意味着服務的單例在此組件級別注入。在ChildComponent中，該服務不需要被列爲提供者，因爲它將使用注入到AppComponent中的相同實例。它所需要做的就是導入AppService模塊，並在構造函數definiton中注入服務。

相反，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文檔。