javascript - pasar - Angular2: componente de clonación/elemento HTML y su funcionalidad

pasar parametros entre componentes angular 4

Question

Entonces, la pregunta es bastante simple ...

Tengo una tabla y alguna lógica angular en ella (cálculo de estilos, etc.) ... específicamente tengo esto en THs

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

Para la funcionalidad de los encabezados adhesivos de mi tabla necesito clonar la tabla y posicionarla fijamente ... usando una directiva, que haga algo como esto (simplificado)

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

obviamente, la lógica angular no se aplica a la tabla nueva, pero quiero que sea ...

¿Cómo lo hago?

Answer 1

Así que hice una investigación y esto es lo que se me ocurrió.

Puede hacerlo y en realidad no es tan difícil usar plantillas y el [ngTemplateOutlet] . Así es como funciona:

@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;
} 

Así que creas una plantilla de referencia, agregas toda tu lógica dentro de ella, y luego creas tantas copias de la plantilla usando [ngTemplateOutlet] . Se mantienen todos los enlaces internos y la funcionalidad angular.

Aquí hay un plunker de trabajo:

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

Como puede ver, lo he probado con *ngIf y [ngStyle] y funcionan como se esperaba y no veo ninguna razón por la que ningún otro tipo de directiva funcione.

Incluso puede usar *ngFor pero luego debe proporcionar el [ngOutletContext] . Lo he hecho en una biblioteca en la que estoy trabajando. Puedes ver un ejemplo aquí:

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