依赖注入：Angular 2 不工作

Question

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

我引入了一个新的 class FriendsService 来分离控制器逻辑和模型关注点。我使用依赖注入在 DisplayComponent class 中调用了 FriendsService class，依赖注入不起作用。

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

constructor(friendsService: FriendsService)

如果将构造函数更改为：

，页面将加载并显示组件（display）

constructor()

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

我解决了。 Eclipse-Plugin 导致了这个问题。该插件未生成符合 ES5 要求的正确代码。

我使用了 "tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts" 网站中描述的 "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) {
    }
}

你可以开始了。希望对你有帮助。

Dependency injection: Angular 2 not working