Blog em Angular – The End

O que faz de um blog um blog é mostrar os posts logo na página principal. Da forma que configuramos a rota padrão até agora, ArtigosComponent é a página de destino onde deveria ter posts, mas até agora, nada…

O Scully fornece o serviço ScullyRoutesService, este, pode ser incorporado a nossos componentes para obter informações sobre rotas que ele criará de acordo com os posts do blog. Vamos colocar este serviço em ação em nossa landing page:

import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';

Faça a importação do ScullyRoute e ScullyRoutesService em artigos.components.ts. Em seguida, injete o ScullyRouteService no construtor da classe ArtigosComponent:

constructor(private scullyService: ScullyRoutesService) {
}

Crie a uma propriedade de componente do tipo array:

posts: ScullyRoute[] = [];

Edite o método ngOnInit do componente e adicione o seguinte código:

ngOnInit(): void {
    this.routeSub = this.scullyService.available$.subscribe((posts) => {
      this.posts = posts.filter((post) => post.title);
    });
  }

Abra artigos.component.html e adicione o seguinte código HTML:

<div class="list-group mt-3">
  <a *ngFor="let post of posts"
    [routerLink]="post.route"
    class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-0">{{ post.title }}</h5>
    </div>
    <p class="mb-0">{{ post.description }}</p>
  </a>
</div>

Existem muitas técnicas Angular envolvidas nas etapas anteriores, então vamos dividi-las peça por peça. Quando queremos usar um serviço Angular em um componente, só precisamos solicitá-lo no framework Angular. Como? Adicionando-o como uma propriedade no construtor do componente. O componente não precisa saber nada sobre como o serviço é implementado. O método ngOnInit faz parte da interface OnInit, que é implementada pelo nosso componente. Ele é chamado pelo framework Angular quando um componente é inicializado e nos fornece um gancho/hook para adicionar lógica personalizada a ser executada.

A propriedade available$ de ScullyRoutesService é chamada de observável. Para recuperar seu valor, precisamos assiná-lo/subscribe. A variável posts retornará todas as rotas disponíveis que foram geradas a partir de Scully. Scully é executado em todas as rotas do nosso aplicativo Angular. Para evitar a exibição de outras rotas além daquelas relacionadas às postagens do blog, como a rota de contato, filtramos os resultados da propriedade available$.

Quando assinamos um observável, precisamos cancelar a assinatura dele quando nosso componente não existir mais. Caso contrário, podemos ter vazamentos de memória em nosso aplicativo Angular. Vamos ver como podemos realizar essa tarefa usando outro gancho de ciclo de vida do componente chamado ngOnDestroy:

1. Declare uma propriedade routeSub privada do tipo Subscription na classe ArticlesComponent. A assinatura pode ser importada do pacote rxjs npm.
2. Defina o valor retornado de available$ para a propriedade routeSub.
3. Adicione a interface OnDestroy à lista de interfaces implementadas do componente. OnDestroy pode ser importado do pacote npm @angular/core. Ele é executado quando o componente é destruído e não é renderizado mais na tela.
4. Implemente o método ngOnDestroy e chame o método unsubscribe da propriedade routeSub no corpo do método.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-artigos',
  templateUrl: './artigos.component.html',
  styleUrls: ['./artigos.component.scss'],
})
export class ArtigosComponent implements OnInit, OnDestroy {
  posts: ScullyRoute[] = [];
  private routeSub: Subscription | undefined;

  constructor(private scullyService: ScullyRoutesService) {}

  ngOnInit(): void {
    this.routeSub = this.scullyService.available$.subscribe((posts) => {
      this.posts = posts.filter((post) => post.title);
    });
  }

  ngOnDestroy(): void {
    this.routeSub?.unsubscribe();
  }
}

No modelo do nosso componente, usamos a diretiva interna *ngFor Angular para iterar sobre o array posts dentro do HTML. Podemos então acessar cada item da matriz usando a variável de referência do modelo post e usar a interpolação para exibir o título e a descrição. Por fim, adicionamos uma diretiva routerLink a cada elemento âncora para navegar até o respectivo post do blog quando clicado. Observe que routerLink é cercado por []. A sintaxe [] é chamada de vinculação de propriedade e a usamos quando queremos vincular a propriedade de um elemento HTML a uma variável. Em nosso caso, vinculamos a diretiva routerLink à propriedade route da variável de referência do modelo de postagem. Agora que finalmente completamos todas as peças do quebra-cabeça, podemos ver nosso blog em ação:

ng build