Question

我一直在研究动态Forms框架，该框架旨在可扩展。元素（例如TextElement-扩展ValueElement）组成表单。它们由“构造函数”转换为Angular控件（即FormControl），并由“编排器”组织在表单布局内。以上三个项目的文件都存储在“窗体” Angular库（ng g lib）中。

以上内容的视觉表示/组件是由“渲染器”创建的，并且渲染器/相关组件存储在单独的库中（基于样式-例如bootstrap-form-renderers）。

ElementHandlers（构造函数/编排器/渲染器）通过Typescript装饰器指定其处理的Element。

import {FormElement} from '../../elements/model/form-element';
import {Type} from '@angular/core';
import 'reflect-metadata';

export function ElementHandler<TFormElement extends FormElement>(elementType: Type<TFormElement>): ClassDecorator {
  console.log('Handling for ' + elementType);
  return target => {
    Reflect.defineMetadata('elementType', elementType.name, target.prototype);
  };
}

例如：

@ElementHandler(TextElement)
export class TextElementOrchestrator extends FormElementOrchestrator<TextElement> {
}

这两个库都导入了Angular应用项目中。

使用“ ng build”（否--prod）时，代码运行良好。每个表单元素都是适当创建的-例如文本输入元素由输入框表示，标签元素由材质设计芯片组件表示。

控制台代码如下所示：

TextElement extends forms_core__WEBPACK_IMPORTED_MODULE_1__["ValueElement"] {
    /**
     * @param {?} id
     * @param {?} title
     * @param {?} value
     */
    constructor(id, title, value) {
        super(id, title);
        this.value = value;
    }
    /**
     * @return {?}
     */
    friendlyValue() {
        return this.value;
    }
}

但是，当使用“ --prod”时，所有内容看起来就像一个“ TextElement”，并且仅显示一个输入框。

控制台的内容如下：

class extends ValueElement{constructor(id,title,value){super(id,title),this.value=[],this.value=value}friendlyValue(){const selectedPredicate=option=>option.selected;return this.options.singleMode?this.value.find(selectedPredicate).value:this.value.filter(selectedPredicate).map(option=>option.value)}}

我怀疑： 1.装饰器在库/ Angular应用程序构建过程中被剥离，因为当尝试在--prod构建中记录“ elementType”元数据时，它显示为“ undefined” 2.这些类没有以某种方式包含在构建中，因此，为什么上面的控制台读数未显示类的详细信息。

有什么办法可以查看/更改它，同时仍将构建优化保持在原位？

我还能看其他东西吗？

我将不胜感激！

生产版本（--prod）删除装饰器/类

0 个答案: