（六）懒加载和依赖注入树

原文链接：https://angular-2-training-book.rangle.io/handout/modules/lazy-load-di.html

懒加载的模块会在依赖注入（DI）树上创建自己的分支。 这意味着它有可能拥有属于懒加载模块的服务，这些模块无法由根模块或任何其他普通应用程序模块访问。

为了显示这个行为，我们继续上一节的例子，并向我们的LazyModule添加一个CounterService 。

app/lazy/lazy.module.ts

...
import { CounterService } from './counter.service';

@NgModule({
  ...
  providers: [CounterService]
})
export class LazyModule {}

在这里，我们将CounterService添加到providers数组。 我们的CounterService是一个简单的类，它持有对counter属性的引用。

app/lazy/counter.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class CounterService {
  counter = 0;
}

我们可以修改LazyComponent来使用这个服务与一个按钮增加counter属性。

app/lazy/lazy.component.ts

import { Component } from '@angular/core';

import { CounterService } from './counter.service';

@Component({
  template: `
    <p>Lazy Component</p>
    <button (click)="increaseCounter()">Increase Counter</button>
    <p>Counter: {{ counterService.counter }}</p>
  `
})
export class LazyComponent {

  constructor(public counterService: CounterService) {}

  increaseCounter() {
    this.counterService.counter += 1;
  }
}

查看示例

该服务正在工作。 如果我们递增计数器，然后在eager和lazy路由之间前后导航，则counter值将在延迟加载的模块中持续存在。

但问题是，我们如何验证服务是否被隔离，不能在属于不同模块的组件中使用？ 我们尝试在EagerComponent使用相同的服务。

app/eager.component.ts

import { Component } from '@angular/core';
import { CounterService } from './lazy/counter.service';

@Component({
  template: `
    <p>Eager Component</p>
    <button (click)="increaseCounter()">Increase Counter</button>
    <p>Counter: {{ counterService.counter }}</p>
  `
})
export class EagerComponent {
  constructor(public counterService: CounterService) {}

  increaseCounter() {
    this.counterService.counter += 1;
  }
}

如果我们尝试运行这个新版本的代码，我们将在浏览器控制台中收到一条错误消息：

No provider for CounterService! 

这个错误告诉我们的是，定义了EagerComponent不知道的一个名为CounterService的服务。 当在浏览器中懒惰加载时， CounterService生活在为LazyModule创建的依赖注入树的不同分支中。