Angular7 - Roteamento

O roteamento basicamente significa navegar entre as páginas. Você viu muitos sites com links que o direcionam para uma nova página. Isso pode ser obtido usando o roteamento. Aqui, as páginas às quais nos referimos serão na forma de componentes. Já vimos como criar um componente. Vamos agora criar um componente e ver como usar o roteamento com ele.

Durante a configuração do projeto, já incluímos o módulo de roteamento e o mesmo está disponível em app.module.ts conforme mostrado abaixo -

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

AppRoutingModule é adicionado conforme mostrado acima e incluído na matriz de importações.

Detalhes do arquivo de app-routing.module são dados abaixo -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({ 
   imports: [
      RouterModule.forRoot(routes)
   ],
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Aqui, temos que observar que este arquivo é gerado por padrão quando o roteamento é adicionado durante a configuração do projeto. Se não forem adicionados, os arquivos acima devem ser adicionados manualmente.

Portanto, no arquivo acima, importamos Routes e RouterModule de @ angular / router.

Há uma const routesdefinido que é do tipo Rotas. É um array que contém todas as rotas que precisamos em nosso projeto.

As rotas const são fornecidas ao RouterModule conforme mostrado em @NgModule. Para exibir os detalhes de roteamento para o usuário, precisamos adicionar a diretiva <router-outlet> onde queremos que a visualização seja exibida.

O mesmo é adicionado em app.component.html conforme mostrado abaixo−

<h1>Angular 7 Routing Demo</h1> 
<router-outlet></router-outlet>

Agora vamos criar 2 componentes chamados Home e Contact Us e navegue entre eles usando o roteamento.

Página inicial do componente

Primeiro, vamos discutir sobre o Lar. A seguir está a sintaxe para Component Home -

ng g component home

C:\projectA7\angular7-app>ng g component home CREATE 
src/app/home/home.component.html (23 bytes) CREATE 
src/app/home/home.component.spec.ts (614 bytes) CREATE 
src/app/home/home.component.ts (261 bytes) CREATE 
src/app/home/home.component.css (0 bytes) UPDATE 
src/app/app.module.ts (692 bytes)

Componente entre em contato conosco

A seguir está a sintaxe do Component Contact Us -

ng g component contactus

C:\projectA7\angular7-app>ng g component contactus 
CREATE src/app/contactus/contactus.component.html (28 bytes) 
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes) 
CREATE src/app/contactus/contactus.component.ts (281 bytes) 
CREATE src/app/contactus/contactus.component.css (0 bytes) 
UPDATE src/app/app.module.ts (786 bytes)

Terminamos de criar componentes para casa e entre em contato conosco. Abaixo estão os detalhes dos componentes em app.module.ts -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      HomeComponent, 
      ContactusComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ],
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Agora vamos adicionar os detalhes das rotas em app-routing.module.ts conforme mostrado abaixo -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [ 
   {path:"home", component:HomeComponent}, 
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { }

A matriz de rotas possui os detalhes do componente com o caminho e o componente. O componente necessário é importado conforme mostrado acima.

Aqui, precisamos observar que os componentes de que precisamos para o roteamento são importados em app.module.ts e também em app-routing.module.ts. Vamos importá-los em um único lugar, ou seja, em app-routing.module.ts.

Portanto, criaremos um array de componentes a ser usado para roteamento e iremos exportar o array em app-routing.module.ts e novamente importá-lo em app.module.ts. Portanto, temos todos os componentes a serem usados para roteamento em app-routing.module.ts.

É assim que temos feito app-routing.module.ts -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component'; 

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { } export const 
RoutingComponent = [HomeComponent,ContactusComponent];

A matriz de componentes, ou seja, RoutingComponent, é importado em app.module.ts da seguinte forma -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe,
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

Portanto, agora definimos as rotas. Precisamos exibir o mesmo para o usuário, então vamos adicionar dois botões, Home e Fale Conosco em app.component.html e, ao clicar nos respectivos botões, ele exibirá a visualização do componente dentro da diretiva <router-outlet> que nós adicionou em add.component.html.

Crie o botão dentro de app.component.html e forneça o caminho para as rotas criadas.

app.component.html

<h1>Angular 7 Routing Demo</h1> 
<nav> 
   <a routerLink = "/home">Home</a> 
   <a routerLink = "/contactus">Contact Us </a> 
</nav> 
<router-outlet></router-outlet>

Em .html, adicionamos links âncora, Home e Contact us, e usamos routerLink para fornecer o caminho para as rotas que criamos em app-routing.module.ts.

Vamos agora testar o mesmo no navegador -

É assim que o obtemos no navegador. Vamos adicionar um estilo para fazer os links parecerem bons.

Adicionamos o seguinte css em app.component.css -

a:link, a:visited { 
   background-color: #848686; 
   color: white; 
   padding: 10px 25px; 
   text-align: center; 
   text-decoration: none; 
   display: inline-block; 
} 
a:hover, a:active {
   background-color: #BD9696;
}

Esta é a exibição dos links no navegador -

Clique no link Home, para ver os detalhes dos componentes da casa como mostrado abaixo -

Clique em Fale Conosco para ver os detalhes de seus componentes conforme fornecido abaixo -

Ao clicar no link, você também verá o URL da página mudando na barra de endereço. Ele anexa os detalhes do caminho no final da página, conforme visto na captura de tela mostrada acima.

↰ Previous page Next page ↱