Question

我已经完成了关于在组件之间共享服务的一些阅读以及使用应用程序组件的基本想法，据我所知，这实际上是创建服务的单一服务提供者。

我加载了一个具有嵌套组件的组件，嵌套组件都使用这个共享服务。将来的事件会在页面上触发，现在我需要HTTP服务来更新和更新所有嵌套组件模板元素。我究竟是如何强迫＆＃34;这个更新？

另外，这是否意味着因为我在app组件中共享了一个服务，只要页面＆＃34; root＆＃34;组件加载？

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

Angular2共享HTTP服务

1 个答案: