Question

我设置了BaseComponent template。我想在扩展基础组件的组件中使用相同的模板HTML。我知道Angular2中的类继承只适用于类而不适用于装饰器。所以看起来我需要一个新的装饰器，它将找到父类及其所有装饰器并应用于当前类。应该可以更改装饰器的某些属性（例如selector）的@Component。

Answer 1

您可以创建自己的组件，利用其父类中的组件元数据创建和注册组件元数据。

类似的东西：

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])) {
        annotation[key] = parentAnnotation[key];
      }
    });
    var metadata = new ComponentMetadata(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

你可以这样使用它：

@Component({
  template: `
    (...)
  `
})
export class ParentComponent {
}

@CustomComponent({
  selector: 'test'
})
export class ChildComponent extends ParentComponent {
}

有关详细信息，请参阅此问题：

Extending component decorator with base class decorator

Angular2继承派生类中的装饰器

1 个答案: