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:
pero este es el resultado real que obtengo del mismo html:
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:
DetailsComponent
de detalles anidado se ocultaráEntonces, ¿por qué angular lo agrega al lugar equivocado? ¿Está funcionando según lo previsto? ¿que me estoy perdiendo aqui?