使用元数据扩展 Angular 5 组件

Extending an Angular 5 component using metadata

当我的项目使用 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);
  };
}

有了这个,你可以创建一个扩展另一个组件 class 的组件 class,使用 @ComponentExtender 而不是 @Component,并从 superclass 继承一些东西,比如模板和样式,如果这些东西不需要在 subclass 组件中更改。

现在我已将我的项目移至 Angular5。注释元数据未定义。

这可能与 AOT 编译有关(即使我没有选择该选项)?任何人都可以想出一种方法来恢复这个装饰器曾经为 Angular 2 和 Angular 4 所做的事情吗?

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

还有'__paramaters__''__prop__metadata__',见source of decorators.ts

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

免责声明:这是一个骇人听闻的实现细节,因此绝不能在生产代码中使用!

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

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