javascript - ¿Cómo usar templateRef?

angular angular2-template

Question

Estoy tratando de encontrar una manera de construir dinámicamente una plantilla en Angular2. Estaba pensando que templateRef podría proporcionar una manera de hacer esto. Pero podría estar equivocado.

Encontré un ejemplo de templateRef siendo usado aquí.

Estaba mirando templateRef en este ejemplo. Noté que la sintaxis es [ng-for-template] También probé [ngForTemplate] porque sé que esto ha cambiado recientemente.

Así que en este momento tengo esto:

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

Este ejemplo lanza un error:

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

Así que en primer lugar me estoy preguntando. ¿Cuál es la forma correcta de hacer esto? Los documentos no proporcionan ningún ejemplo.

En segundo lugar, ¿hay una buena manera de agregar una nueva lógica de plantilla a mi plantilla o construir dinámicamente una plantilla? La estructura de la aplicación puede ser una cantidad muy grande de diferentes combinaciones estructurales. Entonces, si es posible, me gustaría ver si hay una manera de hacerlo sin tener una plantilla enorme con un montón de diferentes declaraciones ngIf y ngSwitch ...

Mi pregunta es realmente la primera parte sobre templateRef. Pero cualquier ayuda o sugerencia en la segunda parte es apreciada.

Answer 1

Crear su propia directiva de plantilla no es difícil, tiene que entender dos cosas principales

• TemplateRef contiene lo que está dentro de su etiqueta <template>
• ViewContainerRef como lo comentó Gunter, mantiene la vista de la plantilla y le permitirá incrustar lo que está dentro de la plantilla en la vista en sí.

Usaré un ejemplo que tengo cuando intenté resolver este issue , mi enfoque no es el mejor para eso, pero funcionará para explicar cómo funciona.

También quiero aclarar que puede usar cualquier atributo para sus plantillas, incluso si ya están siendo utilizadas por directivas integradas (obviamente, esto no es una buena idea, pero puede hacerlo).

Considere mi enfoque para ngIfIn (mi enfoque pobre)

<template  [ngIfValue]="''make''" [ngIfIn]="obj">
  This will print
</template>
<template [ngIfValue]="''notExistingValue''" [ngIfIn]="obj">
  This won''t print
</template>

Aquí tenemos dos plantillas que utilizan dos entradas, cada una de ngIfIn y ngIfValue , por lo que necesito mi directiva para tomar la plantilla por estas dos entradas y obtener sus valores también, para que se vea así

@Directive({
  selector : ''[ngIfIn][ngIfValue]'',
  inputs : [''ngIfIn'', ''ngIfValue'']
})

Primero necesito inyectar las dos clases que mencioné anteriormente.

constructor(private _vr: ViewContainerRef, private _tr: TemplateRef) {}

También necesito almacenar en caché los valores que estoy pasando a través de las entradas

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

En mi caso, dependo de estos dos valores, podría tener mi lógica en ngOnInit pero eso se ejecutaría una vez y no escucharía los cambios en ninguna de las entradas, así que puse la lógica en ngOnChanges . Recuerde que se llama a ngOnChanges justo después de que se hayan verificado las propiedades enlazadas a los datos y antes de que se verifiquen la vista y el contenido si al menos uno de ellos ha cambiado (copiar y pegar desde los documentos).

Ahora básicamente copio y NgIf lógica NgIf (no tan compleja, pero similar)

  // 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();
    }
  }

Como puede ver, no es tan complicado: tome un TemplateRef, tome un ViewContainerRef, haga algo de lógica e incruste el TemplateRef en la vista usando ViewContainerRef.

Ojalá me aclarara y también dejé claro cómo usarlos. Aquí hay un plnkr con el ejemplo que expliqué.

Answer 2

ngForTemplate solo es compatible con ngFor

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

o

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

no en una plantilla plana. Es un @Input() en la directiva NgFor

Otra forma de usar TemplateRef

Si tiene una referencia a ViewContainerRef , puede usarla para "sellar" la plantilla

constructor(private _viewContainer: ViewContainerRef) { }

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