原文地址:https://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html

作者：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 } 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隨後解析。