Angular2共享HTTP服务

更新：这个周末我没有时间整理任何东西，但是如果情况仍然不清楚，我做了一个简化的示例，以展示服务注入在Angular 2中的工作方式。

AppComponent在@Component装饰器中将AppService列为提供程序，这意味着将在此组件级别注入服务的单例。在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);
  }
}

孤立的组件

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);
  }
}

isolated-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);
  }
}

请参阅“分层注射器”文档。