Angular2 共享 HTTP 服务

Question

我已经阅读了一些有关在组件之间共享服务和使用应用程序组件的基本思想的文章，据我所知，这实际上是创建服务的单例作为提供者。

我加载了一个有嵌套组件的组件，嵌套组件都使用这个共享服务。将来的事件会在页面上触发，我现在需要 HTTP 服务来更新和更新所有嵌套组件模板元素。 "force" 这个更新到底要怎么做？

此外，这是否意味着因为我在应用程序组件中共享了一项服务，所以只要页面 "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 装饰器中的提供程序数组注入了一个新的单例实例。 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 文档。

Angular2 共享 HTTP 服务

Angular2 shared HTTP service

angular

angular2-directives

angular2-services