navigationend - router events subscribe angular 4

Angular 2 dynamic `template nombre de variable` s para DynamicComponentLoader?

Question

TL; DR:

• funciona pero no es dinámico
• dinámico pero no funciona

Explicación:

Estoy creando dinámicamente componentes de Angular 2 usando la función loadIntoLocation () de DynamicComponentLoader .

El lugar para insertar el componente generado por esta función está determinado por su parámetro anchorName , que le exime de pasar un Template Variable Name (como una cadena).

Así que en el ejemplo usan <div #child></div> en la plantilla, luego pasan ''child'' . Que funciona bien.

Sin embargo, en lugar de tener que vincular componentes generados a un elemento con un nombre de variable codificado en la plantilla, me gustaría poder, por ejemplo, agregarlos a una lista de tamaño variable.

Ahora, la página de NgFor muestra que tiene acceso a una variable de índice: <li *ng-for="#item of items; #i = index">...</li> . Por lo tanto, funcionaría si pudiera asignar a los elementos de la lista los nombres de variables de plantilla utilizados en este índice o similares, es decir, #child1 , #child2 , etc.

Así que me inclino a probar <div #{{foo}}></div> con una variable de aplicación foo como "child" . Estoy teniendo problemas para depurar esto, ya que el front-end realmente no muestra estos nombres de variables de plantilla en el DOM, pero parece que esta asignación dinámica está fallando, dando como resultado un error "Could not find variable ..." .

¿Podría haber alguna manera de hacer lo que quiero? ¿O incluso para ver los template variable name asignados desde el navegador para la depuración?

Answer 1

Después de buscar respuestas similares, me di cuenta de que la solución predeterminada es en realidad muy estándar: extraiga un componente, donde puede codificar su variable de plantilla y generar tantas instancias de este componente como sea necesario con la directiva *ngFor .

Entiendo que puede haber inquietudes sobre el rendimiento, y no sé lo suficiente para comentar de ninguna manera (quién sabe, puede terminar siendo más rápido), pero en mi opinión, debería ser la primera solución que se prevea.

Y el DynamicComponentLoader mencionado en la respuesta de Eric Martínez parece haber desaparecido de Angular 5 de todos modos (no se pudo encontrar en los documentos).

Answer 2

El problema con este enfoque es que no se pueden generar dinámicamente nombres de variables .

Otro enfoque posible es usar DynamicComponentLoader que, en lugar de usar un nombre de variable, usa un id que puede contener un nombre dinámico.

// This will generate dynamically the id value
template: `
  <div *ng-for="#idx of data">
    <div id="dynamicid_{{idx}}">Dynamic</div>
  </div>`

A continuación, establece la lista que desea iterar sobre

this.data = [1,2,3,4,5,6];

for(var i = 0; i < this.data.length; i++) {
  // Third argument is the injector that I''m not using, so I just nulled it
  dynamicComponentLoader.loadAsRoot(DynamicComponent, ''#dynamicid_''+this.data[i], null);
}

Aquí está el example con un ejemplo trabajando.

Espero que ayude.