【问题标题】:Angular2 DI with ES2016 decorators?带有 ES2016 装饰器的 Angular2 DI?
【发布时间】:2016-01-28 19:05:42
【问题描述】:

这是我得到的最接近的on github

我的服务是

@Injectable() export class TodoService {}

但我不确定如何使用 ES2016 装饰器将其注入到我的组件中。是否有可能,或者装饰器是特定于 Typescript 的?我知道在 TS 中有一个 emitDecoratorMetadata 选项。

【问题讨论】:

    标签: angular ecmascript-2016


    【解决方案1】:
    1. 使用providersviewProviders为组件“提供”服务:

    2. 将服务注入到指定参数类型的组件构造函数中:

    @Component({
      // ...
      providers: [TodoService]
    })
    class TodoComponent() {
    
      constructor(todoService: TodoService) {
        this.todoService = todoService;
      }
    }
    

    或使用Inject 参数装饰器。

    @Component({
      // ...
      providers: [TodoService]
    })
    class TodoComponent() {
    
      constructor(@Inject(TodoService) todoService) {
        this.todoService = todoService;
      }
    } 
    

    参数装饰器不是 ES2016 的一部分(您可以将其视为特定于 TypeScript)。但他们可以是added to the standard later)。

    如果你真的想使用 ES6/ES7,请为parameters 使用静态 getter:

    @Component({
      // ...
      providers: [TodoService]
    })
    class TodoComponent() {
    
      static get parameters() {
        return [[TodoService]]; // you can also return just [TodoService]
      }
    
      constructor(todoService) {
        this.todoService = todoService;
      }
    } 
    

    另外,我建议您阅读 this article 以更好地理解 angular2 依赖注入。

    【讨论】:

    • 那么这两个实现都是 Typescript 特定的?没有办法使用 ES2016 装饰器(不包括参数装饰器,感谢链接)?
    • @iksose 我为 ES6/ES7 添加了示例
    猜你喜欢
    • 2016-02-14
    • 2016-03-23
    • 2016-06-09
    • 2014-07-21
    • 1970-01-01
    • 2012-12-23
    • 2014-02-16
    • 2016-07-18
    • 2012-01-28
    相关资源
    最近更新 更多