如何在 Angular 应用程序中添加自定义 html 或动态加载其他组件？答案

【问题标题】：how to add an custom html in Angular app or dynamically load an other component?如何在 Angular 应用程序中添加自定义 html 或动态加载其他组件？
【发布时间】：2019-03-22 11:09:42
【问题描述】：

我在 Angular 组件中嵌入了一个 DataTables。表格已正确呈现，但现在我想添加一个按钮，单击后我想在我的控制器中执行一个方法。

如何在表格单元格中动态创建 Angular 绑定（单击等）将起作用的 html？

{
   data: null, searchable: false, orderable: false,
   render: (data, type, full) => {
        return '<button class="test" (click)="showDetails($event)">Details</button>';
   }
}

这不起作用。

或者我怎样才能用这个按钮动态注入另一个组件并将数据绑定到它？

【问题讨论】：

动态创建和插入组件并不是一项简单的任务。您确定不能为此使用预定义模板列表吗？
你能给我举个例子来说明你的想法吗？

标签： angular datatables-1.10

【解决方案1】：

根据类型显示不同数据的组件示例：

<div [ngSwitch]="type"

    <ng-template [ngSwitchCase]="TYPE.T_INTEGER">
        <span *ngIf="v != null" [style.white-space]="pre ? 'pre' : null">{{v}}</span>
        <span *ngIf="v == null" style="color:#ccc">Not set</span>
    </ng-template>

    <ng-template [ngSwitchCase]="TYPE.T_STRING">
        <span *ngIf="v != null" style="white-space: pre">{{v}}</span>
        <span *ngIf="v == null" style="color:#ccc">Not set</span>
    </ng-template>

    <ng-template [ngSwitchCase]="TYPE.T_BOOLEAN">
        <div [style.color]="v ? '#00aa00' : '#990000'">
            <i style="line-height:1;font-size:1.25rem" [ngClass]="v ? 'fa-check' : 'fa-cancel'"></i>
            <span style="position:relative;top:-.313rem">{{v ? 'true' : 'false'}}</span>
        </div>
    </ng-template>

    <ng-template [ngSwitchCase]="TYPE.T_STRING_ARRAY">
        <ng-template [ngIf]="v != null">
            <span class="layout vertical" style="text-align:left">
                <small *ngFor="let l of v" style="font-weight:bold">{{l}}</small>
            </span>
        </ng-template>
        <span *ngIf="v == null" style="color:#ccc">Not set</span>
    </ng-template>

    <ng-template ngSwitchDefault>
        <div class="layout vertical end">
            <small style="color:#900">unhandled type: {{type}}</small>
            <pre style="margin:0;color:inherit;max-width:700px;max-height:500px;text-align:left;overflow:auto">{{value | json}}</pre>
        </div>
    </ng-template>

</div>

【讨论】：