Angular中html控件的动态加载[关闭]

Question

我正在研究 Angular 7 中的数据报告解决方案。

我的应用程序将托管大约 200 多个报告，并且我想制作可重用的组件，因此我不需要预先创建 200 多个组件，并且将来，如果我们加入新报告，则不需要更改代码。

这个想法是... 1.报表参数和Spname将存储在DB中 2. 根据报告参数，将显示报告标准部分。 3. 用户提供参数值并单击生成按钮，然后请求将被发送到 REST 服务。 4. Rest服务将根据报表定义中提供的Spname从DB中获取数据并返回给Angular App。

报告参数示例，例如 ... FreeText => 所以用户可以输入任何字符串数据 Date => 选择报告日期 Multiselect => 支持多选下拉框 singleselect => 允许用户一次只选择一个值。

问题是每个报告都是这些参数的不同组合，而且对于给定的报告，参数可以是可重复的，就像可能存在需要两个日期（往返）的报告，因此无法修复标准结构。

有什么方法可以在运行时生成控件并显示在组件上。 我能想到的一种方法是 Jquery。不确定这是否是实现这一目标的正确方法。

任何可用于相同或任何其他方法的示例代码。

<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-2">
                <div>
                    <button class="ev-button" style="float: right;" type="button">Generate Report</button>
                </div>
                <div>
                    <app-report-criteria></app-report-criteria>
                </div>
            </div>
            <div class="vl"></div>
            <div class="col-md-9">
                <app-report-data-display></app-report-data-display>
            </div>
        </div>
    </div>
</div>

我的代码只是将屏幕分为两部分，条件和数据。 我需要让 app-report-criteria 足够强大，以便在运行时根据报告标准生成控件

Answer 1

Angular 开发的第一条经验法则，不要使用 jQuery。

模板驱动程序表单的简单概念证明：

在您的 compenent.js 中生成参数数组：

    var params = [
        { name: "from", type: "date", classes: 'calendar' },
        { name: "to", type: "date", classes: 'calendar' },
        { name: "number", type: "number", classes: '' },
    ]

然后在你的组件html中就可以了

<div *ngFor="let param of params">
    <input type="{{param.type}}" name="{{param.name}}" class="{{param.classes}}" /> 
</div>

如果您对每种参数类型都有一个组件，则可以改为：

<div *ngFor="let param of params" [ngSwitch]="param.type">

    <FreeText *ngSwitchCase="'text'" [name]="param.name" ... ></FreeText>

    <Date *ngSwitchCase="'date'" [name]="param.name" ... ></Date>

    <Multiselect *ngSwitchCase="'multi-select'" [name]="param.name" ... ></Multiselect >

    ...
</div>