0
461
ViewsEn Angular, ¿cómo puede un componente tener múltiples plantillas HTML?
Estoy desarrollando una aplicación de comercio electrónico y una característica importante es que esta aplicación debe tener varios temas. El número total de temas podría ser 100 o incluso más. Sin embargo, todos estos temas tienen los mismos datos (por ejemplo: todas las páginas de inicio tienen las mismas imágenes de banner, productos nuevos, datos de productos destacados).
Sé que puedo usar ng-template o TemplateRef para determinar qué parte de HTML debería mostrarse. Pero como tengo más de 100 temas, los métodos ng-template o TemplateRef cargarán muchos archivos adicionales. Así que creo que necesito algún tipo de carga diferida, cuando un componente carga los datos y luego carga la plantilla HTML correcta. Entonces, ¿cómo puedo tener este trabajo?
3 answers
Answer question0
Parece que es posible, todas nuestras rutas son manejadas por módulos con carga diferida. Esta es nuestra configuración de ruta lista para usar:
const routes: Routes = [ { path: '', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) } ]; Mientras que el módulo lazy tiene esta configuración de ruta:
const routes: Routes = [ { path: 'home', component: HomeComponent }, ] Mientras que HomeComponent se toma de las declaraciones del módulo lazy .
Luego defina otro módulo, llamado por ejemplo lazy-two con la misma configuración de ruta y su propio HomeComponent .
Finalmente, puede cambiar entre los módulos usando este código:
lazyLoad() { const routes: Routes = [ { path: '', loadChildren: () => import('./lazy-two/lazy-two.module') .then(m => m.LazyTwoModule) } ]; this.router.resetConfig(routes); this.router.navigateByUrl('/home'); } Esto cargará de forma diferida el módulo lazy-two y actualizará la ruta a /home ; verá que se muestra el componente del nuevo módulo.
No pude crear un stackblitz, ocurrieron algunos errores probablemente debido a la carga diferida. Así que lo ejecuté localmente en mi máquina y envié el código a GitHub
EDITAR Logré hacer un StackBlitz
0
Recomiendo usar ComponentFactoryResolver para crear los componentes que necesita renderizar.
this.templates = [ { id: "template-1", component: Template1, }, { id: "template-2", component: Template2, }, ]; ngOnInit() { this.templates.forEach((element) => { this.containerReference.createComponent( this.factoryResolver.resolveComponentFactory(element.component) ); }); }en el .html deberías tener
<ng-container #containerReference><ng-container>0
¿Qué hay de usar el mismo componente y darle un estilo diferente cuando selecciona la plantilla?