Como adicionar rolagem infinita à sua aplicação angular
Para começar a construir a aplicação, começamos por instalar a CLI Angular, executando npm i @angular/cli. Depois de o termos instalado, executamos ng new image-gallery para criar uma nova aplicação Angular para a nossa galeria de imagens. Também criamos uma Flux store para armazenar o estado do menu.
A seguir instalamos as bibliotecas para o aplicativo. Executamos npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store para instalar as bibliotecas que precisamos para exibir as fotos e mostrar o slideshow de fotos. Depois executamos ng add @ngrx/store para adicionar o código.
Próximo adicionamos o código do esqueleto para o código que vamos escrever. Executamos os seguintes comandos para fazer isto:
ng g component homePage
ng g component randomSlideshowPage
ng g component topBar
ng g class httpReqInterceptor
ng g service photo
Isto criará os componentes utilizados para a exibição. A classe httpReqInterceptor é usada para anexar a chave da API ao cabeçalho da requisição de cada requisição. O serviço de foto é onde o código para fazer as chamadas para a API Pexels residirá.
Em environment.ts, nós colocamos para nos deixar importar sua chave de API para outros arquivos.:
export const environment = {
production: false,
pexelsApiKey: 'your pexels api key'
};
Em http-req-interceptor.ts,nós adicionamos:
Isso anexa nosso token ao cabeçalho de requisição Authorization de cada requisição com este bloco:
let modifiedReq = req.clone({});
modifiedReq = modifiedReq.clone({
setHeaders: {
'Authorization': environment.pexelsApiKey
}
});
Em photo.service.ts, nós colocamos:
Isso nos permite fazer as requisições para a API do Pexels. Usamos as fotos curadas e buscamos endpoint com paginação em nosso app.
Próximo em home-page.component.ts, colocamos:
É aqui que obtemos as fotos do endpoint das fotos curadas, localizado aqui, para obter as URLs das imagens chamando map no campo das fotos da resposta.
Se um termo de busca for inserido, usaremos o endpoint das fotos de busca aqui e faremos a mesma coisa com a função map. Temos rolagem infinita, então quando o usuário rolar para o final da página, aumentamos o número da página e continuamos adicionando mais URLs de imagens ao nosso array.
Em home-page.component.html, colocamos:
Isso mostra o formulário de busca e envolve nossa grade de fotos em uma rolagem infinita div para que ela carregue novas imagens quando o usuário rolar para baixo.
infiniteScrollDistance é a percentagem da posição da página a partir do fundo da página, então 2 significa que a rolagem infinita será acionada quando tivermos rolado 98% do conteúdo atual na página.
infiniteScrollThrottle é o número de milissegundos até que a rolagem infinita seja acionada depois que o usuário parar de rolagem. O scrolled é acionado quando o usuário rola a página para baixo. Todos estes são opcionais e podem ser ajustados da forma que você quiser.
Em home-page.component.scss, adicionamos:
.tile-image {
width: 100%;
height: auto;
}
Esta opção faz com que as imagens preencham a caixa de grade.
Em random-slideshow-page.component.ts, colocamos:
É aqui que obtemos as fotos aleatórias do ponto final das fotos curadas.
Em random-photos-page.component.html, adicionamos:
É aqui que mostramos o slideshow das fotos.
Próximo fazemos um arquivo chamado menu-reducer.ts e adicionamos o seguinte para armazenar o menu estado:
Em reducers/index.ts, colocamos:
import { menuReducer } from './menu-reducer';export const reducers = {
menu: menuReducer,
};
Esta permite que o StoreModule de @ngrx/store utilize o menu redutor para armazenar o estado.
Em app.component.ts, adicionamos:
Isso fecha automaticamente o menu do lado esquerdo ao mudar de página e se você não estiver clicando no botão de menu. Nós obtemos o estado do menu na loja, e se o menu precisar fechar por navegação ou clicando fora do menu, nós alternamos o menu e definimos o estado na loja.
>
Em top-bar.component.ts, colocamos:
Isso nos permite alternar o menu e armazenar o estado na loja.
Em app.component.html, temos:
Isso mostra o menu do lado esquerdo para navegação, e router-outlet permite que os usuários vejam nossas páginas ao clicar nos links acima ou digitando a URL diretamente.
Em app.component.scss, adicionamos:
#content {
padding: 20px;
min-height: 130vh;
}ul {
list-style-type: none;
margin: 0;
li {
padding: 20px 5px;
}
}
Isso adiciona algum acolchoamento e remove as margens nas páginas.
Finalmente em app.module.ts, colocamos:
Inclui todas as bibliotecas, o interceptor HTTP, e os serviços que precisamos para fazer o aplicativo funcionar.
Finalmente, temos o seguinte na aplicação finalizada:
