Angular 2 - Roteamento

O roteamento ajuda a direcionar os usuários para páginas diferentes com base na opção que eles escolhem na página principal. Portanto, com base na opção escolhida, o componente angular necessário será renderizado para o usuário.

Vamos ver as etapas necessárias para ver como podemos implementar o roteamento em um aplicativo Angular 2.

Step 1 - Adicione a tag de referência de base no arquivo index.html.

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">

      <!-- Polyfill(s) for older browsers -->
      <script src = "node_modules/core-js/client/shim.min.js"></script>
      <script src = "node_modules/zone.js/dist/zone.js"></script>
      <script src = "node_modules/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>

      <script>
         System.import('main.js').catch(function(err){ console.error(err); });
      </script>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

Step 2- Crie duas rotas para o aplicativo. Para isso, crie 2 arquivos chamadosInventory.component.ts e product.component.ts

Step 3 - Coloque o seguinte código no arquivo product.component.ts.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Products',
})
export   class   Appproduct  {
}

Step 4 - Coloque o seguinte código no arquivo Inventory.component.ts.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: 'Inventory',
})
export class AppInventory  {
}

Ambos os componentes não fazem nada extravagante, eles apenas renderizam as palavras-chave com base no componente. Portanto, para o componente Inventory, ele exibirá a palavra-chave Inventory para o usuário. E para o componente de produtos, ele exibirá a palavra-chave do produto para o usuário.

Step 5 - No arquivo app.module.ts, adicione o seguinte código -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

Os seguintes pontos precisam ser observados sobre o programa acima -

Os appRoutes contêm 2 rotas, uma é o componente Appproduct e a outra é o componente AppInventory.
Certifique-se de declarar ambos os componentes.
O RouterModule.forRoot garante a adição de rotas ao aplicativo.

Step 6 - No arquivo app.component.ts, adicione o seguinte código.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`
})
export class AppComponent  { }

O seguinte ponto deve ser observado sobre o programa acima -

<router-outlet> </router-outlet> é o espaço reservado para renderizar o componente com base na opção que o usuário escolhe.

Agora, salve todo o código e execute o aplicativo usando npm. Vá para o navegador e verá a seguinte saída.

Agora, se você clicar no link Inventário, obterá a seguinte saída.

Adicionando uma rota de erro

No Routing, também se pode adicionar uma rota de erro. Isso pode acontecer se o usuário for para uma página que não existe no aplicativo.

Vamos ver como podemos implementar isso.

Step 1 - Adicione um componente PageNotFound como NotFound.component.ts conforme mostrado abaixo -

Step 2 - Adicione o seguinte código ao novo arquivo.

import { Component } from '@angular/core';

@Component ({  
   selector: 'my-app',  
   template: 'Not Found', 
})  
export class PageNotFoundComponent {  
}

Step 3 - Adicione o seguinte código ao arquivo app.module.ts.

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router';  

const appRoutes: Routes = [ 
   { path: 'Product', component: Appproduct }, 
   { path: 'Inventory', component: AppInventory }, 
   { path: '**', component: PageNotFoundComponent } 
];  

@NgModule ({ 
   imports: [ BrowserModule, 
   RouterModule.forRoot(appRoutes)], 
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
   bootstrap: [ AppComponent ] 
}) 

export class AppModule {
}

O seguinte ponto deve ser observado sobre o programa acima -

Agora temos uma rota extra chamada caminho: '**', componente: PageNotFoundComponent. Portanto, ** é para qualquer rota que não se enquadre na rota padrão. Eles serão direcionados para o componente PageNotFoundComponent.

Agora, salve todo o código e execute o aplicativo usando npm. Vá para o seu navegador e você verá o seguinte resultado. Agora, quando você acessar qualquer link errado, obterá a seguinte saída.