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

你很高兴。我希望它有所帮助。