Dom 编写自己的Angular2注释

今天，我试图做我自己的注释，以便在Angular2项目中使用它。 此注释必须在特定零部件上添加实体类

所以，我搜索了Angular源代码，但很难看到注释是在哪里创建的，以及是如何创建的

目前，我已经尝试过：

export function BodyClass(classes: any): ClassDecorator{
    classes = classes || {};

    if(typeof classes === 'string'){
        classes = {classes};
    }

    return function changeBodyClass(){
        console.log('ici');
    }
}

和我的组件：

import {Component} from "angular2/core";
import {RouterOutlet} from "angular2/router";
import {BodyClass} from "../core/annotations/body_class";

@Component({
    selector: 'my-component',
    template: `
        <router-outlet></router-outlet>
    `,
})
@BodyClass('test')
export class MyComponent{
}

从“angular2/core”导入{Component}；
从“angular2/router”导入{RouterOutlet}；
从“./core/annotations/body_class”导入{BodyClass}”；
@组成部分({
选择器：“我的组件”，
模板：`
`,
})
@BodyClass（“测试”）
导出类MyComponent{
}

注释中的控制台日志已正确触发，但我想使用

angular2/src/platform/DOM/DOM_adapter

中的“DOM”类添加我的类，但在控制台日志中未定义DOM（不需要实例化它）

但是，DOM类直接在我的组件中运行良好。 我在ngOnInit函数中添加类，并在Ngondestory中删除它们

但是，我希望在许多组件上都有这种行为，我认为新的注释是最好的方法

也许你有更好的主意？或者在注释上使用DOM类

---

谢谢

这并不明显，因为您希望在组件实例级别而不是组件类1上工作。因此，您需要包装相应的构造函数

export function MyComponentDecorator(value: string) {
  return function (target: Function) {
    var original = target;

    function construct(constructor, args) {
      var c : any = function () {
        // Call the target constructor
        var ret = constructor.apply(this, args);

        // Add your additional processing

        return ret;
      }
      c.prototype = constructor.prototype;
      return new c();
    }

    // The new constructor
    // Don't forget to add a name at this function
    // since Angular requires it for the template compilation
    var f : any = function WrappedComponent(...args) {
      return construct(original, args);
    }

    f.prototype = original.prototype;

    return f;
  }
}

此时，您将包装组件实例，但会丢失组件元数据。您需要手动复制它们：

f.prototype = original.prototype;

var annotations = Reflect.getMetadata('annotations', original));
Reflect.defineMetadata('annotations', annotations, f);

var properties = Reflect.getMetadata('propMetadata', original));
Reflect.defineMetadata('propMetadata', properties, f);

return f;

要使用此装饰器，只需将其添加到

@组件之前或之后即可：

@MyComponentDecorator()
@Component({
  selector: 'sub', 
  template: `
    <div (click)="showMessage()">Test</div>
  `
})
export class SubComponent {
  (...)
}

@MyComponentDecorator（）
@组成部分({
选择器：“sub”，
模板：`
试验
`
})
导出类子组件{
(...)
}

您可以注意到，此装饰器只复制组件级别的元数据，而不复制其他类似属性的元数据（使用
@Input
）

看到这个了吗？。
嗯，谢谢蒂埃里。我会核对你的解释，然后回来；）