Estoy tratando de construir un sistema de paneles de tamaño variable con Angular. Por lo tanto, puede tener varios contenedores separados con una barra que le permite al usuario cambiar su tamaño.
Por el momento tengo una solución que requiere que el desarrollador escriba este código HTML:
<split-pane> <container>Some content</container> <separator></separator> <container>Another content</container> <separator></separtor> <container>Content ?</container> <split-pane>split-pane , container y separator son componentes angular2 personalizados. la plantilla de panel dividido es solo
<ng-content></ng-content> y accedo al contenedor y al separador dentro del panel dividido usando @ContentChildren(ContainerComponent) y @ContentChildren(SeparatorComponent)
El problema que tengo con esta solución es que el desarrollador necesita agregar manualmente cada separador entre todos los contenedores.
Me gustaría tener una solución donde el HTML necesario sería:
<split-pane> <container>Some content</container> <container>Another content</container> <container>Content ?</container> <split-pane>Y los componentes del separador se agregarían automáticamente. Pero no sé cómo hacer esto con Angular. La transclusión parece ser una forma de abordar esto, pero no puedo entenderlo.
Alguna idea ?
Gracias
Si necesitamos cargar algo dinámicamente, primero debemos decir compilador angular sobre nuestro componente dinámico de esta manera:
... entryComponents: [SeparatorComponent] }) export class AppModule {}Así que nuestra plantilla deseada se ve así:
<split-pane> <container>Some content</container> <container>Another content</container> <container>Content ?</container> </split-pane> Para agregar algo entre los elementos del container , debemos obtener ViewContainerRef para cada container . Lo haría dentro de SplitPaneComponent de la siguiente manera
@ContentChildren(ContainerComponent, { read: ViewContainerRef }) containersRefs: QueryList<ViewContainerRef>; Luego, simplemente use ComponentFactoryResolver para obtener la fábrica de componentes y reciba arriba ViewContainers para agregar SeparatorComponent después de la etiqueta del container . Parece que debería verse como:
ngAfterContentInit() { this.containersRefs.forEach((vcRef: ViewContainerRef, index: number, arr: any[]) => { if(index === arr.length - 1) { return; } let compFactory = this.resolver.resolveComponentFactory(SeparatorComponent); let compRef = vcRef.createComponent(compFactory); this.separators.push(compRef); }) }Esto no coincide con la sintaxis deseada, pero al usar ngFor es posible que pueda acortar el código.
Combine ngFor con last :
<template ngFor let-item [ngForOf]="items" let-i="index" let-last="last"> <container>{{item.content}}</container> <separator *ngIf="!last"></separator> </template> Defina items en la clase de componente, para que pueda obtener los datos.