依賴注入：Angular 2不能正常工作

Question

我正在關注教程顯示數據angular.io。

我介紹了一類新的FriendsService以分離控制器邏輯和模型的關注。我通過使用依賴注入在DisplayComponent類中調用FriendsService類，依賴注入不起作用。

控制檯中沒有錯誤。該頁面不顯示組件。這是導致組件不顯示在頁面上的行。

constructor(friendsService: FriendsService) 

該頁面加載和顯示，如果部件（顯示器）改變構造函數：

constructor() 

我使用angular2.alpha.34，打字稿，ES6。

---

我解決了它。 Eclipse-Plugin導致此問題。該插件沒有生成ES5投訴正確的代碼。

我應用於angular.io網站中描述的 「TSC --watch -m CommonJS的-t ES5 --emitDecoratorMetadata app.ts」 命令。

蝕-插件生成的代碼和命令「TSC」生成的代碼是略有不同。

當使用「TSC」命令，我實現了預期的行爲。

Answer 1

首先，您必須在任何組件或指令之前定義服務。

如果你有這樣的事情

class Component { 
    constructor(svc: Service) { 
    } 
} 

class Service { 
} 

它會失敗。在這種情況下，您應該使用fordwardRef或者您可以在組件之前聲明它。

class Service { 
} 

class Component { 
    constructor(svc: Service) { 
    } 
} 

另一件事是，你必須使用viewBindings（見ComponentAnnotation文檔）注入你的服務。

class Service { 
} 

@Component({ 
    viewBindings: [Service] 
}) 
class Component { 
    constructor(svc: Service) { 
    } 
} 

而且你很好去。我希望它有幫助。