Question

我一直在研究Angular 2中的自定义组件，因为工作限制，我试图学习绳索并在使用ES6 / ES7时进行切换。假设我有一个如下所示的组件：

// 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的组件，但是当我按照Stack Overflow Thread中的答案进行操作时，尝试像对构造函数那样注入：

// # 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]];
}

在第一条评论中注明修正后呈现我的组件。

使用以下任何一种方法呈现组件：

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的参数装饰器。

顺便说一下，很多代码来自这个特定的教程，它用TypeScript演示了所有Angular 2的东西，所以我只是用Webpack将它改编成我的es6 / es7环境。 Migrating Directives to Angular 2

Answer 1

您需要在构造函数参数上添加@Inject()装饰器。由于ES7规范不支持这一点（当前规范AFAIK中只允许使用类，属性和方法装饰器），因此需要为您的转换器提供某种插件。

如果您使用Babel进行转换，则可以使用babel-plugin-angular2-annotations插件来允许此操作并正确转换代码。

import {Inject} from 'angular2/core';

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

Answer 2

除了Eric在评论中所说的，也许你错过了@Inject构造函数中的AccordionGroup装饰器

import {Inject} from 'angular2/core';

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

希望它可以帮到你，亨利

Angular 2：我们应该如何使用ES6 / ES7处理依赖注入？

2 个答案: