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

Question

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

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

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

这不起作用。

或者我如何使用此按钮动态注入其他组件并将数据绑定到它？

Answer 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>