Comment utiliser templateRef?

Je suis en train d'essayer de trouver un moyen de construire dynamiquement un modèle dans Angular2. Je pensais templateRef pourrait fournir un moyen pour ce faire. Mais je peux me tromper.

J'ai trouvé un exemple de templateRef utilisé ici.

Je regardais templateRef dans cet exemple. J'ai remarqué que la syntaxe est [ng-for-template] j'ai aussi essayé [ngForTemplate] parce que je sais que cela a changé récemment.

Donc pour le moment j'ai ceci:

import {Component, TemplateRef} from 'angular2/core';

@Component({
    selector : 'body',
    template : `
        <template [ngForTemplate]="container">
            <div class="container"></div>
        </template>
    `
})

export class App
{
    @ContentChild(TemplateRef) container;

    constructor() {}

    ngAfterContentInit()
    {
        console.log(this);
    }
}

Cet exemple renvoie une erreur:

Can't bind to 'ngForTemplate' since it isn't a known native property

Donc, tout d'abord, je suis étonné. Quelle est la bonne façon de le faire? Les docs ne pas fournir des exemples.

Deuxièmement, est-il un bon moyen pour que je puisse ajouter un nouveau modèle logique de mon modèle ou de construire dynamiquement un modèle? La structure de l'application peut être une très grande quantité de différentes combinaisons structurales. Donc, si possible, je voudrais voir si il ya une manière que je peux le faire sans avoir un énorme modèle avec un tas de différentes ngIf et ngSwitch états..

Ma question est vraiment la première partie sur templateRef. Mais toute aide ou des suggestions sur la deuxième partie est apprécié.

source d'informationauteur Kris Hollenbeck

14

De la création de votre propre modèle de directive, il n'est pas difficile, il faut comprendre deux choses principales
- TemplateRef contient ce qui est à l'intérieur de votre <template> tag
- ViewContainerRef comme commenté par Gunter, détient le modèle de vision et vous permettra de les intégrer dans le modèle dans la vue elle-même.
Je vais utiliser un exemple que j'ai quand j'ai essayé de résoudre ce questionmon approche n'est pas la meilleure, mais elle fonctionne pour expliquer comment il fonctionne.

Je tiens à préciser aussi que vous pouvez utiliser n'importe quel attribut de vos modèles, même s'ils sont déjà utilisés par builtin directives (évidemment ce n'est pas une bonne idée, mais vous pouvez le faire).

Considère que mon approche pour ngIfIn (mon pauvre approche)
```
<template  [ngIfValue]="'make'" [ngIfIn]="obj">
  This will print
</template>
<template [ngIfValue]="'notExistingValue'" [ngIfIn]="obj">
  This won't print
</template>
```
Nous avons ici deux modèles à l'aide de deux entrées chacun ngIfIn et ngIfValuedonc j'ai besoin de mon directive de saisir le modèle par ces deux entrées et d'obtenir leurs valeurs trop, de sorte qu'il ressemble à ceci
```
@Directive({
  selector : '[ngIfIn][ngIfValue]',
  inputs : ['ngIfIn', 'ngIfValue']
})
```
D'abord, je dois injecter les deux classes que j'ai mentionné ci-dessus
```
constructor(private _vr: ViewContainerRef, private _tr: TemplateRef) {}
```
J'ai aussi besoin de mettre en cache les valeurs que je suis de passage à travers les entrées
```
  _value: any;
  _obj: any;

  //Value passed through <template [ngIfValue]="'...'">
  set ngIfValue(value: any) {
    this._value = value;
  }

  //Value passed through <template [ngIfIn]="...">
  set ngIfIn(obj: any) {
    this._obj = obj;
  }
```
Dans mon cas, j'ai besoin de ces deux valeurs, j'ai pu avoir ma logique dans ngOnInit mais qui aurait exécuté une seule fois et de ne pas écouter les changements dans les entrées, j'ai donc mis la logique dans ngOnChanges. Rappelez-vous que ngOnChanges est appelée juste après les données liées propriétés ont été vérifiées, et avant d'afficher le contenu et les enfants sont vérifiées si au moins l'un d'entre eux a changé (copier et coller à partir de la documentation).

Maintenant, j'ai simplement copier & coller NgIf logique (pas très complexe, mais similaire)
```
  //ngOnChanges so this gets re-evaluated when one of the inputs change its value
  ngOnChanges(changes) {
    if(this._value in this._obj) {

      //If the condition is true, we embed our template content (TemplateRef) into the view
      this._vr.createEmbeddedView(this._tr);
    } else {

      //If the condition is false we remove the content of the view
      this._vr.clear();
    }
  }
```
Comme vous le voyez ce n'est pas compliqué : Prenez une TemplateRef, prenez un ViewContainerRef, faire un peu de logique et d'intégrer les TemplateRef dans la vue en utilisant ViewContainerRef.

J'espère que je me suis fait clair et je fait comment les utiliser assez clair aussi. Voici un plnkr avec l'exemple que j'ai expliqué.

ngForTemplate est uniquement pris en charge avec ngFor

<template [ngFor] [ngForOf]="..." [ngForTemplate]="container"

<div *ngFor="..." [ngForTemplate]="container"

pas sur un simple modèle. C'est un @Input() sur le NgFor de la directive

Une autre façon d'utiliser TemplateRef

Si vous avez une référence à ViewContainerRef vous pouvez l'utiliser pour "timbre" le modèle

constructor(private _viewContainer: ViewContainerRef) { }

ngOnInit() {
  this.childView = this._viewContainer.createEmbeddedView(this.templ);
  this.childView.setLocal('data', this.data);
}

Vous devez vous connecter pour publier un commentaire.