Introdução
Angular aplicações são muito comuns hoje em dia. Elas são construídas com o conceito de Aplicações de Página Única (SPA). Em tais aplicações, o roteamento entre as páginas web é diferente dos sites tradicionais, já que componentes são utilizados. No Angular, você precisa usar RouterLink para navegação para rotear pela aplicação. O RouterLink é uma diretiva, e fornece Router.navigate e Router.navigateByURL métodos para navegar pelas classes de componentes.
Neste tutorial, nós estaremos analisando RouterLink, Router.navigate, e Router.navigateByURL junto com código exemplos.
RouterLink
No HTML, um link é normalmente inserido usando uma tag de âncora <a> como abaixo:
|
1 2 3 |
<a href="/sample"> Link HTML de exemplo. </a> |
Este link de exemplo navegará o usuário para a /sample página. No entanto, como mencionado acima, uma aplicação de página única (SPA) não possui páginas diferentes para linkar. Em vez disso, ela possui diferentes visualizações ou componentes para exibir ao usuário.
Se você precisar permitir que um usuário navegue e altere a visualização, terá que usar a diretiva RouterLink em vez de href:
|
1 2 3 |
<a routerLink="/users/example"> Link que usa uma string. </a> |
Este RouterLink exemplo levará o usuário ao componente em /users/example. Os diferentes segmentos de URL também podem ser passados em um array, como no exemplo a seguir:
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> Um exemplo de um link com um array. </a> |
Estes dois exemplos são formatados de uma maneira diferente, mas ainda serão direcionados para o mesmo componente em /users/example.
-
Caminho Relativo
O RouterLink permite especificar as URLs relativas. Podemos usar ../ para subir para os níveis mais altos de navegação. Abaixo está como podemos alcançar isso:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> Link que sobe um nível. </a> |
No exemplo acima, se o usuário estiver em /users/posts, a navegação levará o usuário para /posts/parent. Você também pode especificar as URLs de forma relativa usando ./, ../, ou até mesmo sem barra inicial, se necessário.
-
Parâmetros
Pode haver cenários onde você precise passar dados entre as rotas. Um exemplo simples é quando o usuário preenche o formulário e você o leva para a próxima parte do formulário para mais detalhes.
Para passar os parâmetros, um objeto encapsulando os dados é passado na lista de segmentos de URL:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> Link com parâmetro. </a> |
Acima, o Router navegará para /users;display=sample/xyz.
-
Outlets Nomeados
Os outlets de roteador nomeados são simplesmente outlets de roteador com nomes. Vamos dar uma olhada no código para isso:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> Link com um outlet lateral. </a> |
Nesse exemplo, o segmento xyz será colocado no outlet chamado side. Também podemos especificar múltiplos outlets nomeados como abaixo:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> Link com o primeiro e segundo outlets. </a> |
Isso substituirá o segmento first por abc e o segmento second é substituído por xyz.
Router
No Angular, o Router classe é usada para definir as rotas e navegar por elas. Isso é alcançado por dois métodos: Router.navigate e Router.navigateByUrl. Ambos os métodos retornam uma promise. Esta promise pode ter três valores: true, false, ou null.
-
O valor é true quando a navegação é bem-sucedida.
-
O valor é null quando não há navegação.
-
E false se por algum motivo a navegação falhar.
Se você deseja ter esses métodos disponíveis em sua aplicação, primeiro precisa importar a Router classe em sua classe de componente:
|
1 |
import { Router } from '@angular/router'; |
Em seguida, você precisa injetar este Router no construtor para as dependências:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
Com essa configuração, você está pronto para usar os métodos Router.navigate e Router.navigateByUrl em sua aplicação.
Router.navigate
O método Router.navigate aceita um array de segmentos de URL. Vamos dar uma olhada em um exemplo básico de um código Router.navigate:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
Finalmente, vamos dar uma olhada no Router.navigateByUrl. Este método é semelhante ao Router.navigate mas, em vez de aceitar segmentos de URL, ele aceita uma string que especifica a URL. Esta navegação precisa ser absoluta e deve ter / no seu início:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
O código acima irá navegar o usuário para a página /users;all=true.
Conclusão
Neste tutorial, vimos como navegar em aplicativos Angular usando o RouterLink. O roteamento em aplicativos Angular é um pouco diferente das aplicações web tradicionais por ser Single-Page. Conhecer o RouterLink e suas funções pode ajudar os desenvolvedores a construir um roteamento robusto.
Os aplicativos Angular usam Node.js como seu runtime. Se você quiser aprender mais sobre o Node.js e como implantar aplicações Node.js, pode dar uma olhada nos seguintes tutoriais:
- Como instalar o Node.js no Ubuntu 18.04
- Configurando aplicações Node.js: Como realizar tarefas de produção no Ubuntu 20.04 com Node.js
- Como implantar um aplicativo Node.js (Express.js) com Docker no Ubuntu 20.04
Feliz computação!
Comentários
Nenhum comentário ainda. Seja o primeiro.