dependency-injection - 依赖注入(inject) : Angular 2 not working

Question

我正在学习 angular.io 中的教程显示数据.

我引入了一个新类 FriendsService 来分离 Controller 逻辑和模型关注点。我使用依赖注入(inject)在 DisplayComponent 类中调用了 FriendsService 类，但依赖注入(inject)不起作用。

控制台中没有错误。该页面不显示该组件。这是导致组件不显示在页面上的行。

constructor(friendsService: FriendsService) 

如果将构造函数更改为:页面加载并显示组件(display):

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 注入(inject)您的服务(参见 ComponentAnnotation 文档)。

class Service {
}

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

然后你就可以开始了。希望对您有所帮助。