Angular2 DI与ES2016装饰器?

时间:2015-10-28 20:09:39

标签: angular ecmascript-7

这是我得到的最近on github

我的服务是

@Injectable() export class TodoService {}

但我不确定如何使用ES2016装饰器将其注入我的组件中。它甚至是可能的,还是装饰器特定于原型?我知道在TS中有一个emitDecoratorMetadata选项。

1 个答案:

答案 0 :(得分:5)

  1. 使用providersviewProviders为组件“提供”服务:

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

  3. @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依赖注入。