依賴注入：Angular 2無法正常工作

Question

我關注angular.io中的教程display-data。

我引入了一個新類FriendsService來分離控制器邏輯和模型關注點。 我通過使用依賴項注入在DisplayComponent類中調用了FriendsService類，該依賴項注入不起作用。

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

constructor(friendsService: FriendsService) 

如果將構造函數更改為以下內容，則頁面將加載並顯示組件（顯示）：

constructor() 

我正在使用angular2.alpha.34，Typescript，ES6。

---

我解決了 Eclipse-Plugin引起了該問題。 該插件未生成ES5投訴正確代碼。

我使用了angular.io網站中介紹的“ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts”命令。

eclipse-plugin生成的代碼和命令“ 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) {
    }
}

而且你很好。 希望對您有所幫助。