原文地址: "https://blog.thoughtram.io/angular/2015/09/03/forward references in angular 2.html" 作者： "Christoph Burgdorf" 譯者註：文章內容比較老，控制台信息等與新框架不完全一致，理解思路即可 ...
原文地址:https://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html
譯者註：文章內容比較老，控制台信息等與新框架不完全一致，理解思路即可。
一. 問題點在哪裡
先做一個小聲明，我們現在擁有一個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 } from '@angular/core';
class NameService {
getName () {
return "Angular";
}
}
@Component({
selector: 'my-app',
template: '<h1>Favourite framework: {{ name }}</h1>'
})
class AppComponent {
name: string;
constructor(nameService: NameService) {
this.name = nameService.getName();
}
}此時它似乎可以正常工作了。那麼問題來了：
Javascript解釋器進行這樣的改動意義何在呢？
二. 不對Class定義進行提升的理由
先來理解一下Javascript語言的機制，Javascript解釋器不進行類的提升，是因為變數提升會導致在使用extend關鍵字實現繼承時會導致錯誤，例如當被繼承者是一個合法的函數表達式時。來看這樣一段ES6代碼：
class Dog extends Animal {
}
function Animal() {
this.move = function () {
alert(defaultMove);
}
}
var defaultMove = "moving";
var dog = new Dog();
dog.move();上述代碼是能夠正常工作的，因為Javascript解釋器對其進行了提升重組，實際相當於如下代碼：
var defaultMove, dog;
function Animal() {
this.move = function () {
alert(defaultMove);
}
}
class Dog extends Animal {
}
defaultMove = "moving";
dog = new Dog();
dog.move();然而，如果將Animal從一個函數聲明改變成一個函數表達式時，它是不會被提升的。
//將函數聲明改變為函數表達式
class Dog extends Animal {
}
var Animal = function Animal() {
this.move = function () {
alert(defaultMove);
}
}
var defaultMove = "moving";
var dog = new Dog();
dog.move();提升後的真實執行順序如下，函數表達式並沒有被提升：
var Animal, defaultMove, dog;
class Dog extends Animal {
}
Animal = function Animal() {
this.move = function () {
alert(defaultMove);
}
}
defaultMove = "moving";
dog = new Dog();
dog.move();如果函數表達式也被提升，那麼當Dog類繼承Animal類時就會報錯，因為它還沒有被聲明。從上面的示例中不難看出，如果Javascript解釋器對class聲明也進行提升處理，就容易在類繼承時出現基類未定義的錯誤。
三. class在使用前必須聲明嗎？
我們理解了class為什麼不適合被提升執行順序，這對於之前的Angular的示例來說有什麼指導意義呢？我們只能通過將NameService移動到代碼頂部的方式來解除之前的報錯嗎？
答案是我們可以使用另一種解決方案。我們使用@Inject註解和forwardRef函數來替代之前方式，也就是聲明一個NameService類型的參數nameService，如下所示：
import { Component, Inject, forwardRef } from '@angular/core';
@Component({
selector:'my-app',
template:'<h1>Favourite framework:{{ name }}</h1>'
})
class AppComponent{
name: string;
constructor(@Inject(forwardRef(()=> NameService)) nameService){
this.name = nameService.getName();
}
}
class NameService{
getName(){
return "Angular"
}
}forwardRef所做的工作，就是接收一個函數作為參數，然後返回一個class，因為這個函數並不是立即被調用的，而是在NameService聲明之後才會安全地返回NameService,也就是說當()=>NameService執行的時候，NameService的值已經不是undefined了。
四. 小結
這個場景並不會經常出現，一般它只在當我們想要註入在同一個文件中聲明的類時才會發生，大多數情況下我們在一個文件中只會聲明一個類，並且會在文件的頭部引入其他依賴的類，以此來保證不會被class不進行變數提升的特性造成困擾。
五.補充
以下內容摘錄自Angular中文網:
在Typescript裡面，類聲明的順序很重要，如果一個類尚未定義，就不能引用它。
這通常都沒有問題的，特別是遵循一個文件一個類規則的時候。但有時候迴圈引用可能無法避免，當類A引用類B，同時B又引用A時，就會陷入困境：它們中的某一個必須先定義。
forwardRef( )建立一個間接引用，供Angular隨後解析。
