在 Angular 中动态加载 html 控件

Question

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

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

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

报告参数示例，例如... FreeText => 因此用户可以输入任何字符串数据 Date => 至 select 报告日期 Multiselect => 显示多个 select 下拉框 singleselect => 允许用户一次 select 只有一个值。

问题是每个报告都是这些参数的不同组合，而且给定报告的参数可以重复，就像可能有一个报告需要两个日期（开始和结束），所以不能固定标准结构。

有什么方法可以在运行时生成控件并显示在组件上。我能想到的一种方法是 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>

在 Angular 中动态加载 html 控件

Dynamic loading of html controls in Angular

html

jquery

angular

angular7