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

Question

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

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

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

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

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

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

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

Answer 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], Все внутренние крепления и угловая функциональность сохраняются.

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

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