依赖注入：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) {
    }
}

而且你很好。 希望对您有所帮助。