Как добавить пользовательский HTML в приложение Angular или динамически загрузить другой компонент? - PullRequest
Новая
       14

Как добавить пользовательский HTML в приложение Angular или динамически загрузить другой компонент?

0 голосов
/ 22 марта 2019

Я встроил DataTables в угловой компонент. Таблица отображается правильно, но теперь я хочу добавить кнопку, а после щелчка хочу выполнить метод в моем контроллере.

Как я могу динамически создать html в ячейке таблицы, в которой будет работать угловая привязка (щелчок и т. Д.)? 

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

Это не работает.

Или как с помощью этой кнопки динамически внедрить другой компонент и связать с ним данные?

1 Ответ

0 голосов
/ 22 марта 2019

Пример компонента, который отображает разные данные в зависимости от его типа: 

<code><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}}
</ Нг-шаблон>
...