web-dev-qa-db-fra.com

Angular2: composant de clonage / élément HTML et ses fonctionnalités

Donc, la question est assez simple ...

J'ai une table et un peu de logique angular dessus (calcul des styles, etc.) ... spécifiquement, je l'ai sur les TH

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

Pour ma fonctionnalité d'en-têtes collants de table, je dois cloner la table et la positionner fixe. À l'aide d'une directive, qui fait quelque chose comme ça (simplifié)

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

évidemment la logique angular n'est pas appliquée au newTable, mais je veux que ce soit ...

Comment fait-on ça?

javascriptangularangular2-directives
22
DS_web_developer

J'ai donc fait quelques recherches et c'est ce que j'ai trouvé.

Vous pouvez le faire et ce n'est pas si difficile d'utiliser des modèles et le [ngTemplateOutlet]. Voilà comment cela fonctionne:

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

Vous créez donc un modèle de référence, ajoutez toute votre logique à l'intérieur de celui-ci, puis vous créez simplement autant de copies du modèle à l'aide de [ngTemplateOutlet]. Toutes les liaisons internes et la fonctionnalité angular sont conservées.

Voici un plongeur qui travaille:

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

Comme vous pouvez le voir, je l'ai testé avec *ngIf et [ngStyle] et ils fonctionnent comme prévu et je ne vois aucune raison pour laquelle aucun autre type de directive ne fonctionnerait.

Vous pouvez même utiliser *ngFor mais vous devez ensuite fournir le [ngOutletContext]. Je l'ai fait dans une bibliothèque sur laquelle je travaille, vous pouvez voir un exemple ici:

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

12
Filip Lauc