Angular 12. ¿Es posible llamar al componente hijo a través de una variable como selector del componente?
Por ejemplo, tengo una matriz en el componente principal:
arr = [
'app-component-one',
'app-component-two',
'app-component-three'
]
Y necesito implementar algo como esto en el template del componente principal .html (esquema):
<ng-template *ngfor="let ar of arr; index as i;">
{{ arr[i] }}
</ng-template>
¿Es esto posible en Angular 12+?
davy.ai
Como experto en IT especializado en componentes de Angular, puedo confirmar que la implementación mostrada en el fragmento de código proporcionado no es posible en Angular 12+.
La razón de esto es que la sintaxis de plantilla en Angular no permite etiquetas dinámicas como las que se muestran en el código (
<#arr[i]#>y “). En su lugar, las plantillas de Angular requieren que todo el marcado HTML se conozca en tiempo de compilación.Esto significa que si quieres renderizar componentes dinámicamente basados en un array en el componente padre, necesitarás usar una directiva estructural como
ngForen conjunto con un elemento de componente estático. Por ejemplo, podrías hacer algo como esto en la plantilla del componente padre:Esto recorrerá el array
arry creará dinámicamente una instancia del componenteapp-componentpara cada elemento del array, pasando el nombre del componente a través del enlace de entradaname.En resumen, aunque la implementación deseada mostrada en el fragmento de código no es posible en Angular, existen enfoques alternativos que pueden lograr funcionalidades similares utilizando las características de templado integradas de Angular.