Блог

Главная - Вопросы по программированию - как добавить пользовательский html в приложение Angular или динамически загрузить другой компонент?

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

#angular #datatables-1.10

#angular #таблицы данных-1.10

Вопрос:

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

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

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

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

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

Комментарии:

1. Динамическое создание и вставка компонентов — непростая задача. Вы уверены, что не можете просто использовать список предопределенных шаблонов для этого?

2. Можете ли вы показать мне какой-либо пример, чтобы понять суть вашей идеи?

Ответ №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>