由于工作限制,我一直在 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