angular - 如何找到装饰有某种装饰的所有属性？

Question

我想为已经用 Angular Input 装饰器装饰的属性添加装饰器。
我需要这个，因为我想为特定的 Component 获取一些(装饰的)Input 属性。

我发现了非常相似的问题 here ，但有一个很大的不同(我需要它用于属性而不是类，所以我不能按照建议的公认答案在类上引入新变量)。

我想实现的是:

export class BaseComponent 
{   
    @Input() id: number;
    @Input() @isFilter id2: number;
    @Input() @isFilter id3: number;

    public getDefaultFilter(): object
    {
        let o: Partial<this> = {};

        //Assign all properties on this(self), which has decorator isFilter, to o!!   

        return o;    //o should be {id2: whatever_is_set, id3: whatever_is_set}
    }
}

Answer 1

您可以使用 reflect-metadata 将装饰属性存储为元数据。例如。以下代码将存储所有用 @isFilter() 修饰的属性的名称。然后，您可以调用 getFilteredProperties(this) 获取仅包含装饰属性的 this 的浅拷贝。

import 'reflect-metadata';

const metadataKey = Symbol('isFilter');

function isFilter(): (target: object, propertyKey: string) => void {
  return registerProperty;
}

function registerProperty(target: object, propertyKey: string): void {
  let properties: string[] = Reflect.getMetadata(metadataKey, target);

  if (properties) {
    properties.push(propertyKey);
  } else {
    properties = [propertyKey];
    Reflect.defineMetadata(metadataKey, properties, target);
  }
}

function getFilteredProperties(origin: object): object {
  const properties: string[] = Reflect.getMetadata(metadataKey, origin);
  const result = {};
  properties.forEach(key => result[key] = origin[key]);
  return result;
}

您可能还想看看 TypeScript documentation for decorators .

更新:由于 Plunker 目前似乎有一些技术困难，我借此机会设置了一个 Stackblitz对于上面的代码。仍然可以找到旧的 Plunker here .