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文档。