Utilice los puntos de quiebre personalizados de Angular Flex Layout para mostrar/ocultar elementos.
Estoy trabajando en la implementación de puntos de interrupción personalizados para el diseño de flexión, extendiendo la ShowHideDirective
.
Mi directiva personalizada se muestra a continuación.
import { Directive } from '@angular/core';
import { ShowHideDirective } from '@angular/flex-layout';
const selector = `[fxHide.xs.ngb], [fxHide.sm.ngb]`;
const inputs = ['fxHide.xs.ngb', 'fxHide.sm.ngb'];
@Directive({ selector, inputs })
export class CustomShowHideDirective extends ShowHideDirective {
protected override inputs = inputs;
}
También estoy definiendo un token como se muestra a continuación.
import { BreakPoint, BREAKPOINTS } from '@angular/flex-layout';
const CUSTOM_BREAKPOINTS: BreakPoint[] = [
{
alias: 'xs.ngb',
mediaQuery: 'screen and (min-width: 0px) and (max-width: 599.98px)',
},
{
alias: 'sm.ngb',
mediaQuery: 'screen and (min-width: 600px) and (max-width: 959.98px)',
},
];
export const CustomBreakPointsProvider = {
provide: BREAKPOINTS,
useValue: CUSTOM_BREAKPOINTS,
multi: true,
};
En un módulo compartido, declaro y proporciono la directiva y el proveedor.
@NgModule({
declarations: [CustomShowHideDirective],
providers: [CustomBreakPointsProvider],
exports: [CustomShowHideDirective],
imports: [CommonModule, FlexLayoutModule],
})
export class SharedModule {}
Y en la plantilla, estoy utilizando la directiva de la siguiente manera:
<div fxlayout="column">
<span>Some text</span>
<button fxhide.sm.ngb="true">Get started</button>
</div>
¿Por qué el elemento de botón no se oculta cuando el viewport es < sm.ngb?
¿Me falta más configuración con esta implementación?
davy.ai
Puede haber varias razones por las cuales el elemento del botón no se oculta cuando el viewport es < sm.ngb:
Verifique si el SharedModule está correctamente importado en el módulo que contiene la plantilla con el elemento del botón.
Asegúrese de que el token CustomBreakPointsProvider esté correctamente definido y proporcionado en el SharedModule.
Verifique la sintaxis y los valores de la consulta de medios en el array CUSTOM_BREAKPOINTS para asegurarse de que sean correctos.
Verifique el uso correcto de la directiva en la plantilla; en este caso, el atributo fxHide.sm.ngb debe establecerse en “true” para ocultar el elemento cuando el viewport es < sm.ngb.
Si ninguna de estas sugerencias resuelve el problema, puede ser necesario investigar más a fondo el código y el entorno para identificar la causa raíz del problema.