Barras de encabezado dinámico y / o contenido para su Ivy Angular Aplicación

(Nasreddine Skandrani) (24 de junio de 2020)

Es posible que deba tener diferentes barras de encabezado y / o contenido, por ejemplo, para diferentes tipos de usuarios. Veamos cómo hacerlo.

Nota:
Si no está con Angular Ivy (angular 8 y menor). Puedes echar un vistazo a
mi publicación en este número de github donde agregué una buena demostración de enlace a ayudarlo a cargar manualmente un módulo en versiones angulares antiguas.
Si tiene Ivy habilitado, simplemente continúe leyendo el artículo, se presenta una solución.

Escenario 1: barras de encabezado dinámicas con mismo contenido

Solución 1

Consulte la demostración en línea de esta solución 1.

En esta solución 1, usamos un router-outlet con nombre para manejar el header bar. Desafortunadamente, la carga diferida con loadChildren y llamado router-outlet tiene un error en Angular en este momento.

Problema de error en Github -> https://github.com/angular/angular/issues/12842

Esta demostración termina con este error en el registro:

Entonces, por ahora, esta solución 1 con `loadChildren` no funciona, pero puede que algún día lo haga.

Solución 2

Consulte la demostración en línea para esta solución 2.

En esta solución 2, utilizamos este artículo . Así que enrutamos a un HeaderbarSelectorComponent y luego cargamos de forma diferida el módulo correcto con un condicional estándar desde dentro de este componente.

En la demo2, puede alternar el 2 headerbars usando el botón toggle user type en el cuerpo de la página y luego recargando la página.

❤️ Esta solución funciona perfectamente como puede ver en la demostración. ❤️

Escenario 2: barras de encabezado dinámicas con contenido dinámico

Aplicar la misma estrategia como escenario1 / solución2 para la carga de contenido dinámico.

¡Esta publicación le resultó útil! dale un poco 👏👏👏 .
Gracias

referenciado: 18093 12088 12842

Deja una respuesta

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