libs/suspense/directives/default-view.directive.ts
Directiva que define el área donde se va a incluir el componente de tipo Suspenseable. IMPORTANTE: Es opcional definir el nombre de la clase del componente. De hacerlo se debe usar el @Input() clazzName ó bien indicar el valor como un atributo 'clazzName' dentro del objeto @Input() componentParams
Proveedores |
{
provide: SuspenseCacheService, useValue: SUSPENSE_CACHE
}
|
Selector | [defaultView] |
Propiedades |
|
Métodos |
Entradas |
constructor(suspenseCache: SuspenseCacheService<SuspenseFactoryPromise>)
|
||||||||
Constructor de la directiva.
Parámetros :
|
clazzName | |
Tipo : string
|
|
(opcional) Nombre de la clase asociada al componente a cargar. IMPORTANTE: Su opcionalidad está condicionada a que el valor de clazzName pueda haberse definido previamente dentro del @Input() componentParams |
defaultView | |
Tipo : SuspenseFactoryPromise
|
|
Constructor/Factory para el componente a cargar. Comparte el nombre de la directiva, por lo que se
se asigna como parámetro.
|
onEvent | |
Tipo : string
|
|
(opcional) Nombre que se utilizará como prefijo para los eventos. Aplica solamente para el modo de operación reactivo. |
fetch | ||||||||
fetch(clazzName?: string)
|
||||||||
La función fetch() se encargará de realizar la petición hacia el código del componente a cargar. Si se ha especificado el nombre de la clase del componente, se utilizará el cache para evitar realizar la petición nuevamente.
Parámetros :
Devuelve :
SuspenseFactoryPromise
Promise que devuelve el componente a cargar |
Public suspenseCache |
Tipo : SuspenseCacheService<SuspenseFactoryPromise>
|
Decoradores :
@Inject(SUSPENSE_CACHE)
|
Servicio que se encargará de almacenar los componentes que se hayan cargado previamente.
|
import { Directive, inject, Inject, Input } from '@angular/core';
import { SuspenseCacheService } from '@queplan/qp-suspense/services';
import { SuspenseFactoryPromise, SUSPENSE_CACHE, SUSPENSE_LOG } from '@queplan/qp-suspense/types';
let suspenseConsole: Console;
/**
* Directiva que define el área donde se va a incluir el componente de tipo Suspenseable.
* IMPORTANTE: Es opcional definir el nombre de la clase del componente. De hacerlo se debe usar el
* @Input() clazzName ó bien indicar el valor como un atributo 'clazzName' dentro del objeto
* @Input() componentParams
*/
@Directive({
selector : '[defaultView]',
standalone: true,
providers : [
{
provide: SuspenseCacheService,
useValue: SUSPENSE_CACHE
}
]
})
export class DefaultViewDirective {
// Ref: https://medium.com/javascript-everyday/tip-20-prefetch-lazy-loaded-component-fc04abb6eb87
// defer(() => import(/* webpackPrefetch: true | <number> */'<lib>').then( ({ [ComponentClass] }) => ComponentClass ))
/**
* Constructor/Factory para el componente a cargar. Comparte el nombre de la directiva, por lo que se
* se asigna como parámetro.
* `[defaultView]="componentFactory"`
*/
@Input('defaultView') componentFactory!: SuspenseFactoryPromise;
/**
* (opcional) Nombre de la clase asociada al componente a cargar.
* IMPORTANTE: Su opcionalidad está condicionada a que el valor de clazzName
* pueda haberse definido previamente dentro del @Input() componentParams
*/
@Input() clazzName? : string;
/**
* (opcional) Objeto con los parámetros del Componente, que están definidos como sus @Input()
* IMPORTANTE: Es opcional (caso que no haya @Input()), pero clazzName debe estar definido aquí ó
* en el @Input() clazzName
*/
@Input() componentParams? : {
clazzName?: string | undefined,
[key: string]: unknown
};
/**
* (opcional) Nombre que se utilizará como prefijo para los eventos. Aplica solamente para el modo de operación reactivo.
*/
@Input() onEvent?: string;
/**
* (opcional) Indicará si el componente que se va a cargar está definido dentro de un módulo (no es standalone). Puede ser true o
* señalar el nombre del módulo (en caso que difiera del nombre del componente). Requiere que el módulo donde está declarado el componente
* implemente SuspenseableModule.
*/
@Input() isModule? : boolean | string;
/**
* Wrapper para función de registro de mensajes de log.
* Mostrará los mensajes solamente si la aplicación ha configurado el provider DEBUG_SUSPENSE explícitamente en true.
*/
suspenseConsole = inject(SUSPENSE_LOG);
/**
* Constructor de la directiva.
* @param suspenseCache Servicio que se encargará de almacenar los componentes que se hayan cargado previamente.
*/
constructor(@Inject(SUSPENSE_CACHE) public suspenseCache: SuspenseCacheService<SuspenseFactoryPromise>) {
suspenseConsole = this.suspenseConsole;
}
/**
* Rescata el nombre de la clase que eventualmente pudiera haberse entregado como parámetro del componente.
* @returns {string | undefined} Nombre de la clase del componente a cargar
*/
getClazzName(): string | undefined {
return this.clazzName ?? this.componentParams?.clazzName;
}
/**
* La función fetch() se encargará de realizar la petición hacia el código del componente a cargar.
* Si se ha especificado el nombre de la clase del componente, se utilizará el cache para evitar realizar
* la petición nuevamente.
* @param clazzName opcional, en caso de pasarlo como parámetro se usará el cache
* @returns {SuspenseFactoryPromise} Promise que devuelve el componente a cargar
*/
fetch(clazzName?: string): SuspenseFactoryPromise {
if(clazzName) {
suspenseConsole.log('Usando cache para clazzName: ', clazzName);
if (!this.suspenseCache.hasClazz(clazzName)) {
suspenseConsole.log('Seteando cache para clazzName: ', clazzName);
this.suspenseCache.setClazz(clazzName, this.componentFactory);
}
return this.suspenseCache.getClazz(clazzName);
} else {
suspenseConsole.log('Devolviendo componentFactory');
return this.componentFactory;
}
}
}