【Angular專題】——（2）【譯】Angular中的ForwardRef

原文地址: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隨後解析。