2

由于工作限制,我一直在 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 环境。将指令迁移到 Angular 2

4

2 回答 2

1

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

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

import {Inject} from 'angular2/core';

export class AccordionGroup {
  constructor(@Inject(Accordion) accordion) {
    // ...
  }
}
于 2016-01-29T17:21:55.057 回答
0

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

import {Inject} from 'angular2/core';

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

希望它可以帮助你,蒂埃里

于 2016-01-29T16:35:02.493 回答