• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

169
Vistas
Cómo usar el componente <parent> y <child> en la recursión de plantilla en angular

Tengo 2 componentes <parent> y <child> . Quiero usarlos en <ng-template> recursivo

digamos por el bien de la simplicidad

El componente <parent> contendrá <ul>

El componente <child> contendrá <li>

esto es lo que he mencionado https://gist.github.com/arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72

así es como lo he intentado

 <div> <ng-template #recursiveList let-list> <span *ngFor="let item of list"> <!-- commented {{item.title}} --> <child [item]="item"/> <!-- commented <ul *ngIf="item.children.length > 0"> --> <template> <parent [item]="item"/> <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container> </template> <!-- commented </ul> --> </span> </ng-template> <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container> </div>

pero el código anterior no funciona correctamente

mi resultado esperado debería verse como se muestra a continuación, para un padre con 2 hijos

 <span> <parent> <child/> // <-- child 1 <child/> // <-- child 2 </span>

con html se ve como a continuación

 <span> <ul>Parent</ul> <li>child 1</li> // <-- child 1 <li>child 1</li> // <-- child 2 </span>

debe seguir el mismo anidamiento con cualquier nivel.

ayúdenme con una demostración de https://gist.github.com/arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72

Por favor ayúdenme gracias de antemano!!!

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

principal.componente.html

 <div> <parent *ngFor="let item of list" [item]="item"> </div>

padre.componente.html

 <span>{{item.name}}</span> <ul> <child *ngFor="let child of item.children" [item]="child"> </ul>

niño.componente.html

 <li> <parent [item]="item"> </li>
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda