El diseño en la aplicación de Angular no corresponde a su estructura.
Tengo una aplicación angular y descubrí que tiene un comportamiento de diseño incorrecto que no corresponde a la estructura planeada. A continuación se muestra el código:
index.html contiene el siguiente código:
<body>
<app-root></app-root>
<!-- Footer -->
<footer>
Algo está aquí
</footer>
</body>
app.component.html contiene lo siguiente:
<div>
la barra de herramientas está aquí
...
</div>
<router-outlet></router-outlet>
Y luego tengo un componente principal:
<h1>El componente principal comienza aquí</h1>
<div>
Algo para el componente principal
</div>
<h1>El componente principal termina aquí</h1>
Como resultado, espero ver la siguiente estructura:
- barra de herramientas
2.1 El componente principal comienza aquí
2.2 componente principal
2.3 El componente principal termina aquí
- footer
Pero veo el orden incorrecto de los componentes:
- barra de herramientas
2.1. El componente principal comienza aquí
2.3. El componente principal termina aquí
- footer
2.2. componente principal
¿Por qué el footer no se muestra como el último componente aquí? ¿Alguna idea de cómo solucionar esto?
davy.ai
El problema con el comportamiento del diseño es que el pie de página no se muestra como el último componente. Esto ocurre porque el pie de página está fuera del componente app-root y no forma parte de la aplicación Angular. Para solucionar esto, mueva el pie de página dentro del componente app-root en el archivo app.component.html como se muestra a continuación:
Sustituya
nombre-del-componente-de-la-barra-de-herramientasynombre-del-componente-del-pie-de-páginapor los nombres apropiados de los componentes en su aplicación. Esto asegurará que el pie de página se muestre como el último componente en la estructura planificada.