Estoy buscando una solución para representar dinámicamente algún componente en mi aplicación angular. Entonces, creo que el mejor enfoque es buscar en https://angular.io/guide/dynamic-component-loader , pero esto no es exactamente lo que estoy buscando.
Solo un poco de contexto, digamos que su aplicación permite a sus usuarios ver ofertas según su perfil/elegibilidad. Mi aplicación hará alguna solicitud y al final puede considerar que podemos construir algunos métodos como
isEligibleToFirstOffer() : boolean isEligibleToSecondOffer() : boolean isEligibleToThirdOffer() : booleanCada oferta es realmente específica y tiene una lógica comercial diferente, por lo que no podemos simplemente crear un componente genérico con entradas, me gustaría separar cada oferta en su propio componente para aislar tanto como sea posible la lógica por tipo de ofertas.
Lo que quiero lograr es crear un componente OffersWrapper que tome como entrada una matriz de clases de componentes y lo represente en un contenedor principal.
Esta matriz se construiría con la lógica anterior, algo como:
const componentsToRender = [ ...(isEligibleToFirstOffer() ? [FirstOfferComponent] : []), ...(isEligibleToSecondOffer() ? [SecondOfferComponent] : []), ...(isEligibleToThirdOffer() ? [ThirdOfferComponent] : []) ]Ahora la pregunta es, ¿cuál es el mejor enfoque para dar esta matriz a un componente genérico y hacer que se represente dinámicamente?
También podríamos mejorar un poco los componentsToRender para poder inyectar también datos, pero este no es el problema principal de esta pregunta, de todos modos, podría ser interesante dar una respuesta completa para futuros desarrolladores que quieran echar un vistazo a esta solución.
const componentsToRender: {component: any, data: any}[]al final, la solución nos daría la posibilidad de escribir este tipo de código:
<html> <body> <main> <component-wrapper [components]=componentsToRender></component-wrapper> <router-outlet></router-outlet> </main> </body> </html>¡Gracias!
De la pregunta, parece que tiene un conjunto de componentes y sabe qué quiere renderizar y para qué casos por adelantado.
Si es así, entonces no hay tanta dinámica. Puede encapsular todo en un componente. El componente decidirá qué renderizar y cuándo. Si es necesario, se podría crear un servicio adicional para descargar la lógica de decisión del componente.
Podría ser tan simple como
@Component({ template: ` <component-a *ngIf="condition1"></component-a> <component-b *ngIf="condition2"></component-b> <component-c *ngIf="condition3"></component-c> ` }) export class Component { condition1: boolean; condition2: boolean; condition3: boolean; ngOnInit() { this.service.getData().subscribe(res => { // set the conditions here }); } } Si necesita mostrar ofertas en forma de cola por casualidad, puede hacer esta cola en ngOnInit .
Por ejemplo
@Component({ template: ` <component-a *ngIf="queue[0] === 'component-a'" (close)="queue.shift()"></component-a> <component-b *ngIf="queue[0] === 'component-b'" (close)="queue.shift()"></component-b> <component-c *ngIf="queue[0] === 'component-c'" (close)="queue.shift()"></component-c> ` }) export class Component { queue = []; // ['component-a', 'component-b'] for example ngOnInit() { this.service.getData().subscribe(res => { // set the queue here }); } }