角2：我们应该如何处理依赖注入与ES6 / ES7？ [英] Angular 2: How Should We Be Handling Dependency Injection with ES6/ES7?

问题描述

我一直在努力的自定义组件中的2角，因为我尝试去学习的绳索，使开关，同时与ES​​6 / ES7住，由于工作的限制。说我有定义，如该组件：

I have been working on a custom component within Angular 2 as I attempt to learn the ropes and make the switch while staying with ES6/ES7 due to job constraints. Say I have a component defined such as this:

// Import Inject, Component and View constructor (for metadata)
import {Inject, Injectable} from 'angular2/core';
import {Component, View} from 'angular2/core';
// Import NgClass directive
import {NgClass} from 'angular2/common';

import { InjectMetadata } from 'angular2/core';

// # Accordion Component

@Component({
  selector: 'accordion, [accordion]',

  // Modify the `host` element with a css class designator
  host: {
    'class': 'panel-group'
  }
})

// Define the view of our `Component` using one or more
// `View` annotations
@View({

  // Link to our external template file
  templateUrl: './components/accordion/accordion.html'
})

// Create and export `Component` class
export class Accordion {

  constructor() {

    this.groups = [];
  }

  // Function to register groups
  addGroup(group) {
    this.groups.push(group);
  }

  closeOthers(openGroup) {
    this.groups.forEach((group) => {
      if(group !== openGroup) {
        group.isOpen = false;
      }
    });
  }

  removeGroup(group) {
    let index = this.groups.indexOf(group);

    if(index !== -1) {
      this.groups.splice(index, 1);
    }
  }
}

我需要这个传递到另一个名为组件 AccordionGroup 但是当我按照这个答案<一个href=\"https://stackoverflow.com/questions/33026015/how-to-inject-angular2-http-service-into-es6-7-class\">Stack溢出线程并尝试注入就像我的构造函数来完成：

I need to pass this into another component called AccordionGroup but when I follow the answers in this Stack Overflow Thread and try to inject like I do with the constructor:

// # AccordionGroup Component

// Annotate AccordionGroup class with `Component`
@Component({
  selector: 'accordion-group, [accordion-group]',
  inputs: ['heading', 'isOpen'],

  // Let Angular know about `Accordion`
  providers: [Accordion]
})

// Define the view of our `Component` using one or more
// `View` annotations
@View({

  // Link to our external template file
  templateUrl: './components/accordion/accordion-group.html',

  // Specify which directives our `Component` will utilize with
  // the `directive` property of the `View` annotation
  directives: [NgClass]
})

// Create and export `Component` class
export class AccordionGroup {

  constructor(accordion) {

    this.isOpen = false;

    this.accordion = accordion;

    this.accordion.addGroup(this);
  }

  // Angular 2 DI desugar'd
  // Reference: https://stackoverflow.com/questions/33026015/how-to-inject-angular2-http-service-into-es6-7-class
  static get parameters() {
    return [[Accordion]];
  }

  toggleOpen(event) {
    event.preventDefault();
    this.isOpen = !this.isOpen;
    this.accordion.closeOthers(this);
  }

  onDestroy() {
    this.accordion.removeGroup(this);
  }
}

使用

static get parameters() {
  return [[Accordion]];
}

使得第一意见指出，修正后呈现我的组件。

renders my component after making the correction noted in the first comment.

使用下列任何的渲染组件：

Using any of the following renders the component:

AccordionGroup.parameters = [[Accordion]];

或

AccordionGroup.parameters = [new Inject(Accordion)];

甚至

// Use reflect metadata as an attempt to inject appropriate
// dependency
@Reflect.metadata('parameters', [[new InjectMetadata(Accordion)]])

但问题依然存在，其中这些是使用直至建立必要的时候，我们可以使用参数装饰与ES7适当的方法。

but the question remain, which of these is the appropriate method to use until such a time when we can use parameter decorators with ES7.

顺便说一句，很多code从其中演示了所有的角2的东西与打字稿这个特殊的教程来了，所以我干脆就适应了我的ES6 / ES7环境WebPACK中| 迁移指令，以角2

As an aside, a lot of the code came from this particular tutorial which demonstrates all of the Angular 2 stuff with TypeScript, so I simply adapted it to my es6/es7 environment with Webpack | Migrating Directives to Angular 2

推荐答案

您需要添加在你的构造函数参数 @Inject（）装饰。
因为这不是由ES7规范支持（仅适用于类，属性和方法的装饰被允许在当前规范据我所知），你需要有某种形式的插件为您transpiler。

You need to add the @Inject() decorator on your constructor parameter. As this is not supported by the ES7 spec (only class, property and methods decorators are allowed in the current spec AFAIK), you need to have some kind of plugin for your transpiler.

如果您使用的是通天transpile，您可以使用通天-插件，angular2-注释插件，以便这一点，正确的transpile code。

If you are using Babel to transpile, you can use the babel-plugin-angular2-annotations plugin to allow this and correctly transpile the code.

import {Inject} from 'angular2/core';

export class AccordionGroup {
  constructor(@Inject(Accordion) accordion) {
    // ...
  }
}

这篇关于角2：我们应该如何处理依赖注入与ES6 / ES7？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！