是否可以在 angular 中使用元数据注释数据模型？

Question

我有一个简单的数据模型，我想用元数据进行注释

export class Certification {
    title: string;
    certificationType?: CertificationType;
    validTo?: number;
    description?: string;
    externalIdentifier: Guid;

    constructor() {
        this.title = '';
        this.certificationType = CertificationType.Undefined;
        this.validTo = 0;
        this.description = '';
        this.externalIdentifier = null;
    }
}

我希望我能以某种方式像这样注释模型

export class Certification {
    @Heading() 
    title: string;
    certificationType?: CertificationType;
    @Label('My label') 
    validTo?: number;
    description?: string;
    @Hidden()
    externalIdentifier: Guid;

    constructor() {...}
}

我有很多非常相似的模型，所以我更愿意创建一个简单的组件来处理所有这些模型的显示逻辑，而不是为每个模型创建一个组件，然后由每个人控制差异模板。

我已尝试使用反射元数据 api，如此处所述的打字稿文档中所定义：https://www.typescriptlang.org/docs/handbook/decorators.html#property-decorators 但是即使元数据在构建时应用于模型，当我通过绑定分配它时它们似乎丢失了。

<display-annotated-model [model]="certification"></display-annotated-model>

所以我的问题是有人成功了吗？

或者是否有其他方法来注释我应该查看的数据模型（我已经用尽了我的谷歌搜索能力）？

我需要在 Angular 9 中完成这项工作。感谢任何意见:)

Answer 1

这是可能的。注释的原始计划会使它非常有用。不幸的是，这些注释变成了装饰器。作为装饰器，关于他们正在装饰的属性的任何元数据都存储在全局装饰器存储中。

Angular 本身会在编译时转换其内置装饰器（@Component()、@Directive()、@Pipe()、NgModel()、@Injectable() 等...）成注释。

注解和装饰器有什么区别？

注释只是元数据，存储在对象的实例中（取决于您要注释的内容）。

装饰器是包装器，可以修改属性访问器、方法、class -- 以及在每个属性访问器、方法或 class 上提供元数据。

由于装饰器的这种动态特性，编译器无法判断底层代码是否可以安全地摇树。

因此，在大多数情况下，装饰器不适用于浏览器代码。尽管可以为自定义装饰器创建自定义编译器插件——这基本上可以完成 Angular 为其装饰器所做的事情。

我感兴趣的另一种方法是能够将元数据添加到 ReactiveForm 声明中。

这是一个类似的例子：https://github.com/martinmcwhorter/modelmetadata

是否可以在 angular 中使用元数据注释数据模型？

Is it possible to annotate data models with metadata in angular?

metadata

typescript

angular