• 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

128
Vistas
Contenido proyectado anidado de duplicación angular

Quiero crear componentes angulares para imitar detalles nativos y resumir elementos HTML para que los detalles puedan anidarse dentro de sí mismos a través de la proyección de contenido, pero por alguna razón, angular está creando una copia de elementos anidados renderizados dinámicamente en el componente principal, por lo que aparecen dos listas en la interfaz de usuario. de uno.

aquí está el código de muestra

así que este es el resultado esperado en la carga de la página:Resultado Esperado

pero este es el resultado real que obtengo del mismo html:resultado actual

El DetailsComponent está utilizando la proyección de contenido junto con ng-container para renderizar condicionalmente DetailsComponent anidado, SummaryComponent se renderiza estáticamente sin lógica adicional allí, por lo que uno funciona bien, pero DetailsComponent cuando se alterna con su elemento secundario SummaryComponent muestra la lista fuera del DetailsComponent anidado, el DetailsComponent externo no no tiene ninguna lista mencionada en la plantilla y, sin embargo, se representa tanto en el componente principal como en el DetailsComponent , para obtener el resultado esperado, realice estos pasos:

  • en la carga de la página, haga clic en el ícono de resumen externo, el DetailsComponent de detalles anidado se ocultará
  • luego haga clic en él nuevamente y verá que la lista se muestra solo una vez y en la posición correcta, que es el comportamiento esperado que estoy tratando de lograr.

Entonces, ¿por qué angular lo agrega al lugar equivocado? ¿Está funcionando según lo previsto? ¿que me estoy perdiendo aqui?

about 3 years ago · Juan Pablo Isaza
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