用基类装饰器扩展组件装饰器

Question

我在每个组件上都有几个组件装饰器声明，例如：

@Component({

    moduleId: module.id,

    directives: [BootstrapInputDirective]

})

如何将这些声明应用于所有组件？我试图用此装饰器创建一个基类，并用它扩展其他类，但是基类装饰似乎不适用于派生类。

Answer 1

在Angular的最新版本之后，ComponentMetadata类不再可用，这是少数成员指出的。这就是我实现CustomComponent使其工作的方式：export function CustomComponent(annotation: any) {  return function (target: Function) {      let parentTarget = Object.getPrototypeOf(target.prototype).constructor;      let parentAnnotations = Reflect.getOwnMetadata('annotations', parentTarget);      let parentAnnotation = parentAnnotations[0];      Object.keys(annotation).forEach(key => {        parentAnnotation[key] = annotation[key];      });  };}希望能帮助到你！编辑：前面的代码块，即使它起作用，它也会覆盖扩展类的原始元数据。在增强版的下面找到它，使您无需修改基类即可拥有多个继承和覆盖。export function ExtendComponent(annotation: any) {  return function (target: Function) {    let currentTarget = target.prototype.constructor;    let parentTarget = Object.getPrototypeOf(target.prototype).constructor;    let parentAnnotations = Reflect.getOwnMetadata('annotations', parentTarget);    Reflect.defineMetadata('annotations', [Object.create(parentAnnotations[0])], currentTarget);    let currentAnnotations = Reflect.getOwnMetadata('annotations', currentTarget);    Object.keys(annotation).forEach(key => {        currentAnnotations[0][key] = annotation[key];    });};}

Answer 2

如果有人在寻找更新的解决方案，Thierry Templier的答案将是非常完美的。除了ComponentMetadata已被弃用。使用Component反而对我有用。完整的Custom Decorator CustomDecorator.ts文件如下所示：import 'zone.js';import 'reflect-metadata';import { Component } from '@angular/core';import { isPresent } from "@angular/platform-browser/src/facade/lang";export function CustomComponent(annotation: any) {  return function (target: Function) {    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);    var parentAnnotation = parentAnnotations[0];    Object.keys(parentAnnotation).forEach(key => {      if (isPresent(parentAnnotation[key])) {        // verify is annotation typeof function        if(typeof annotation[key] === 'function'){          annotation[key] = annotation[key].call(this, parentAnnotation[key]);        }else if(          // force override in annotation base          !isPresent(annotation[key])        ){          annotation[key] = parentAnnotation[key];        }      }    });    var metadata = new Component(annotation);    Reflect.defineMetadata('annotations', [ metadata ], target);  }}然后将其导入到您的新组件sub-component.component.ts文件中，并使用@CustomComponent而不是@Component这样：import { CustomComponent } from './CustomDecorator';import { AbstractComponent } from 'path/to/file';...@CustomComponent({  selector: 'subcomponent'})export class SubComponent extends AbstractComponent {  constructor() {    super();  }  // Add new logic here!}