Criando Links em Angular

Para facilitar a navegação entre diferentes partes da aplicação, geralmente se usa um sistema de navegação composto por links. Por exemplo, vamos considerar o seguinte projeto mencionado no tema anterior:

helloapp/
├── src/
│   ├── app/
│   │   ├── about.component.ts
│   │   ├── app.component.ts
│   │   ├── app.config.ts
│   │   ├── home.component.ts
│   │   ├── not-found.component.ts
│   ├── main.ts
│   ├── index.html
├── angular.json
├── package-lock.json
├── package.json
└── tsconfig.json

No tema anterior, no arquivo app.config.ts foram definidas três rotas:

import { ApplicationConfig } from "@angular/core";
import { provideRouter, Routes } from "@angular/router";

import { HomeComponent } from "./home.component";
import { AboutComponent } from "./about.component";
import { NotFoundComponent } from "./not-found.component";

// definição de rotas
const appRoutes: Routes = [
  { path: "", component: HomeComponent },
  { path: "about", component: AboutComponent },
  { path: "**", component: NotFoundComponent },
];

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(appRoutes)],
};

Os componentes HomeComponent e AboutComponent representam, respectivamente, as páginas inicial e sobre da aplicação. O processamento de cada um deles é responsável por gerar o conteúdo que será inserido no template do componente principal, o AppComponent.

Agora, vamos adicionar a navegação ao projeto. Para isso, no AppComponent, definimos um conjunto de links para navegação:

import { Component } from "@angular/core";
import { RouterOutlet, RouterLink } from "@angular/router";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  styles: `a {padding: 5px;}`,
  template: `<div>
    <nav>
      <a routerLink="">Início</a>
      <a routerLink="/about">Sobre o site</a>
    </nav>
    <router-outlet></router-outlet>
  </div>`,
})
export class AppComponent {}

A diretiva routerLink, importada do pacote @angular/router, é usada para definir os endereços dos links.

De acordo com a primeira rota, o HomeComponent processa as requisições de URLs sem segmentos, por isso, para criar o link para esse componente, utilizamos uma string vazia: <a routerLink="">.

O AboutComponent processa requisições que contêm "about" no endereço, logo, o link correspondente é <a routerLink="/about">. Vale destacar o uso da barra / no início do endereço. Quando definimos o conjunto de links no componente principal AppComponent, a barra inicial pode ser omitida. No entanto, se os links forem definidos em componentes filhos, como no AboutComponent, a ausência da barra pode resultar em um caminho incorreto. A barra ajuda a definir o caminho relativo à raiz da aplicação.

Estilizando Links Ativos

Para estilizar links ativos, usamos a diretiva especial routerLinkActive, que aplica uma classe CSS ao link ativo. Vamos alterar a classe do componente para incluir a estilização:

import { Component } from "@angular/core";
import { RouterOutlet, RouterLink, RouterLinkActive } from "@angular/router";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  styles: `a {padding: 5px;}
              .active {color: red;}`,
  template: `<div>
    <nav>
      <a routerLink="" routerLinkActive="active">Início</a>
      <a routerLink="/about" routerLinkActive="active">Sobre o site</a>
    </nav>
    <router-outlet></router-outlet>
  </div>`,
})
export class AppComponent {}

No entanto, devemos considerar um detalhe importante ao estilizar os links. Quando clicamos no link "Sobre o site", ambos os links acabam sendo estilizados:

Isso ocorre porque o caminho da primeira rota routerLink="" coincide com o URL da segunda rota routerLink="/about", já que o primeiro caminho pode ser interpretado como qualquer outro caminho.

Para resolver isso, usamos a diretiva routerLinkActiveOptions para fazer ajustes adicionais:

<nav>
  <a routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Início</a>
  <a routerLink="/about" routerLinkActive="active">Sobre o site</a>
</nav>

O valor {exact:true} indica que a correspondência completa do caminho será necessária para definir o link como ativo.

Assim, garantimos que apenas o link correspondente ao URL exato seja estilizado como ativo.