Question

当我的项目使用Angular 2和Angular 4时，我能够使用这个有用的装饰器来使组件扩展另一个组件：

// Modified from https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7#.s9pf0649f
// by Thierry Templier.

import { Component } from '@angular/core';

export function ComponentExtender(annotation: any): ((target: Function) => void) {
  return function(target: Function): void {
    let parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    let parentAnnotations = Reflect.getMetadata('annotations', parentTarget); // TODO: Doesn't work in Angular 5, returns undefined.
    let parentAnnotation = parentAnnotations[0];

    Object.keys(parentAnnotation).forEach(key => {
      if (parentAnnotation[key]) {
        if (!annotation[key]) {
          annotation[key] = parentAnnotation[key];
        }
      }
    });

    let metadata = new Component(annotation);

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

有了这个，您可以创建一个扩展另一个组件类的组件类，使用@ComponentExtender而不是@Component，并继承超类中的内容，如模板和样式，如果这些内容不需要在子类组件中进行更改

现在我已经将项目移动到Angular 5了，这已经不再有用了。注释元数据未定义。

这可能与AOT编译有关（即使我没有选择该选项）？谁能想到一种方法来恢复这个装饰者用来为Angular 2和Angular 4做的事情？

Answer 1

您可以通过target['__annotations__'][0]获取注释。

还有'__paramaters__'和'__prop__metadata__'，请参阅source of decorators.ts

注意：根据Angular Blog，构建优化器现在默认用于生产构建，因此注释在运行时将不可用。

免责声明：这是一个hacky和一个实现细节，所以永远不要在生产代码中使用它！

Answer 2

您可以将组件的注释保存在单独的变量中，并将其与组件一起导出，因此您无需从组件的元数据中检索它。这是一个小例子，希望它对你有所帮助。

https://stackblitz.com/edit/angular-bxbpwr?embed=1&file=app/asignAnnotations.ts

使用元数据扩展Angular 5组件

2 个答案: