原文地址:

作者：Christoph Burgdorf

译者注：文章内容比较老，控制台信息等与新框架不完全一致，理解思路即可。

一. 问题点在哪里

先做一个小声明，我们现在拥有一个AppComponent，并使用DI系统向其中注入了一个NameService，因为我们使用的是Typescript，所以需要做的工作就是在构造函数的参数中声明变量nameService的类型为NameService，这样做的目的是为了向Angular提供运行时解析依赖所需要的相关信息。

app.ts

import { Component } from '@angular/core'; import { NameService } from './name.service';  @Component({   selector: 'my-app',   template: '<h1>Favourite framework: {{ name }}</h1>' }) class AppComponent {   name: string;    constructor(nameService: NameService) {     this.name = nameService.getName();   } }

nameService.ts

export class NameService {   getName () {     return "Angular";   } }

上述代码是可以正常工作的，如果我们将nameService.ts中的代码直接嵌入app.ts时，会产生哪些变化呢？别着急反对，先听听我希望声明的问题点。

import { Component } from '@angular/core';  @Component({   selector: 'my-app',   template: '<h1>Favourite framework: {{ name }}</h1>' }) class AppComponent {   name: string;    constructor(nameService: NameService) {     this.name = nameService.getName();   } }  class NameService {   getName () {     return "Angular";   } }

当我们试图运行上面的代码时，它并未能够正常工作。但是在控制台上却无法得到报错信息，我猜想是因为调试Typescript代码时使用了source map。无论如何，当我们在调试器中打开Pause on caught exceptions功能时，就会在Angular框架中捕获这个错误：

Cannot resolve all parameters for AppComponent(undefined). Make sure they all have valid type or annotations

错误信息显示，AppComponent的构造函数在被调用时，同一个文件中声明的NameService类型的变量是undefined。这个错误提示是合理的，因为我们在定义NameService之前就在AppComponent的构造函数中使用了它，但是另一方面来看，在普通的ES5代码中就不会出现报错，因为函数声明会被Js解释器提升至作用域头部，不是说ES6仅仅是ES5的语法糖么？

那如果我们将NameService的定义代码进行提前，会出现什么情况呢：

import { Component