Подтвердить что ты не робот

Angular2: элемент клонирования/элемент HTML и его функциональность

Итак, вопрос довольно прост...

У меня есть таблица и некоторая логика angular (вычисление стилей и т.д.)... в частности, у меня есть это на THs

[class.hidden] = "column.group !== 'key-data' && currentTableView !== column.group"

Для моей таблицы липких функций заголовков мне нужно клонировать таблицу и фиксировать ее с помощью директивы, которая делает что-то вроде этого (упрощенного)

let newTable = element.cloneNode(true);
body.appendChild(newTable);

очевидно, что логика angular не применяется к newTable, но я хочу, чтобы она была...

Как мне это сделать?

Ответ 1

Итак, я сделал некоторые исследования, и это то, что я придумал.

Вы можете это сделать, и на самом деле это не так сложно, используя шаблоны и [ngTemplateOutlet]. Вот как это работает:

@Component({
  selector: 'my-app',
  template: `
    <template #temp>
        <h1 [ngStyle]="{background: 'green'}">Test</h1>
        <p *ngIf="bla">Im not visible</p>   
    </template>
    <template [ngTemplateOutlet]="temp"></template>
    <template [ngTemplateOutlet]="temp"></template>
    `
})

export class AppComponent {
    bla: boolean = false;
    @ContentChild('temp') testEl: any;
}

Итак, вы создаете ссылочный шаблон, добавляете в него всю свою логику, а затем просто создаете столько копий шаблона, используя [ngTemplateOutlet]. Все внутренние привязки и angular сохраняются.

Вот рабочий плункер:

http://plnkr.co/edit/jPt5eKUfLUe9FxnLH8bL?p=preview

Как вы можете видеть, я протестировал его с помощью *ngIf и [ngStyle], и они работают как ожидалось, и я не вижу причин, почему любая другая директива не будет работать.

Вы даже можете использовать *ngFor, но затем вам нужно предоставить [ngOutletContext]. Я сделал это в библиотеке, над которой я работаю, вы можете увидеть здесь пример:

https://github.com/flauc/ng2-simple-components/blob/master/src/select/select.component.ts