Saltar al contenido

diseño flexible (caja flexible) con salida de enrutador angular

Solución:

Para cualquiera que tenga un problema similar, el problema se resolvió haciendo

<div class="container"
         fxLayout>
    <div fxFlex="25%" fxShow.lt-sm="false">
      <admin-route-menu></admin-route-menu>
    </div>
    <div fxFlex>
      <router-outlet></router-outlet>
    </div>
  </div>

Básicamente, siempre use divs con el módulo de diseño de flexión angular, ya que algunos elementos personalizados no funcionan bien con él, como la salida del enrutador

La solución proporcionada por @dinamix funciona bien. Entonces, explicaría la razón detrás de este problema.

El problema al que se enfrenta se espera debido a la razón obvia por la que le ha dado el atributo flex a la salida del enrutador. Y por lo tanto, la salida del enrutador ocupa todo el espacio que queda (ancho aquí).

Esta confusión debería desaparecer si se entiende que Angular no reemplaza el router-outlet con el componente correspondiente a la ruta. Más bien, agrega el componente al lado de la salida del enrutador.

Entonces, al envolver la salida del enrutador en un contenedor y configurar la flexión, dejará la salida del enrutador intacta, y el efecto de flexión será visible para su hermano (forma de proveedor en su ejemplo) agregado por angular.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *