Cómo añadir scroll infinito a tu app de Angular
Para empezar a construir la app, comenzamos instalando el CLI de Angular ejecutando npm i @angular/cli. Después de haberlo instalado, ejecutamos ng new image-gallery para crear un nuevo Angular para nuestra app de galería de imágenes. También creamos un Flux store para almacenar el estado del menú.
A continuación instalamos las librerías para la app. Ejecutamos npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store para instalar las librerías que necesitamos para mostrar las fotos y mostrar el slideshow de fotos. Luego ejecutamos ng add @ngrx/store para añadir el código.
A continuación añadimos el código esqueleto para el código que escribiremos. Para ello ejecutamos los siguientes comandos:
ng g component homePage
ng g component randomSlideshowPage
ng g component topBar
ng g class httpReqInterceptor
ng g service photo
Esto creará los componentes utilizados para la visualización. La clase httpReqInterceptor se utiliza para adjuntar la clave de la API a la cabecera de la petición de cada solicitud. Photo service es donde residirá el código para hacer las llamadas a la API de Pexels.
En environment.ts, ponemos para permitirnos importar su clave de API a otros archivos.:
export const environment = {
production: false,
pexelsApiKey: 'your pexels api key'
};
En http-req-interceptor.ts, añadimos:
Esto adjunta nuestro token a la cabecera de petición Authorization de cada petición con este bloque:
let modifiedReq = req.clone({});
modifiedReq = modifiedReq.clone({
setHeaders: {
'Authorization': environment.pexelsApiKey
}
});
En photo.service.ts, ponemos:
Esto nos permite hacer las peticiones a la API de Pexels. Usamos el endpoint de fotos curadas y búsqueda con paginación en nuestra app.
A continuación, en home-page.component.ts, ponemos:
Aquí es donde obtenemos las fotos del endpoint de fotos curadas, situado aquí, para obtener las URLs de las imágenes llamando a map en el campo fotos de la respuesta.
Si se introduce un término de búsqueda, usaremos aquí el endpoint de búsqueda de fotos y haremos lo mismo con la función map. Tenemos scroll infinito, así que cuando el usuario se desplaza hasta el final de la página, aumentamos el número de página y seguimos añadiendo más URLs de imágenes a nuestro array.
En home-page.component.html, ponemos:
Esto muestra el formulario de búsqueda y envuelve nuestra cuadrícula de fotos en un scroll infinito div para que cargue nuevas imágenes cuando el usuario se desplace hacia abajo.
infiniteScrollDistance es el porcentaje de la posición de la página desde el fondo de la misma, por lo que 2 significa que el scroll infinito se disparará cuando hayamos desplazado el 98% del contenido actual de la página.
infiniteScrollThrottle es el número de milisegundos hasta que se dispare el scroll infinito después de que el usuario deje de desplazarse. El scrolled se dispara cuando el usuario se desplaza hacia abajo en la página. Todos estos son opcionales y se pueden ajustar de la forma que se desee.
En home-page.component.scss, añadimos:
.tile-image {
width: 100%;
height: auto;
}
Esto hace que las imágenes llenen la caja de la cuadrícula.
En random-slideshow-page.component.ts, ponemos:
Aquí es donde obtenemos las fotos aleatorias del endpoint de fotos curadas.
En random-photos-page.component.html, añadimos:
Esto muestra el slideshow de fotos.
A continuación hacemos un archivo llamado menu-reducer.ts y añadimos lo siguiente para almacenar el estado del menú:
En reducers/index.ts, ponemos:
import { menuReducer } from './menu-reducer';export const reducers = {
menu: menuReducer,
};
Esto permite que el StoreModule de @ngrx/store utilice el reductor del menú para almacenar el estado.
En app.component.ts, añadimos:
Esto cierra automáticamente el menú de la izquierda cuando se cambia de página y si no se hace clic en el botón del menú. Obtenemos el estado del menú en la tienda, y si el menú necesita cerrarse por navegación o por hacer clic fuera del menú, desactivamos el menú y establecemos el estado en la tienda.
En top-bar.component.ts, ponemos:
Esto nos permite alternar el menú y almacenar el estado en la tienda.
En app.component.html, tenemos:
Esto muestra el menú lateral izquierdo para la navegación, y router-outletpermite a los usuarios ver nuestras páginas al hacer clic en los enlaces de arriba o al escribir la URL directamente.
En app.component.scss, añadimos:
#content {
padding: 20px;
min-height: 130vh;
}ul {
list-style-type: none;
margin: 0;
li {
padding: 20px 5px;
}
}
Esto añade algo de relleno y elimina los márgenes en las páginas.
Por último en app.module.ts, ponemos:
Esto incluye todas las librerías, el interceptor HTTP, y los servicios que necesitamos para que la app funcione.
Finalmente tenemos lo siguiente en la app terminada:
