Angular 4 - Roteamento

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

No componente pai principal app.module.ts , precisamos incluir agora o módulo roteador, como mostrado abaixo -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

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,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

importar {RouterModule} de '@ angular / router'

Aqui, o RouterModule é importado do angular / roteador. O módulo está incluído nas importações, como mostrado abaixo -

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

RouterModule refere-se ao forRoot que recebe uma entrada como uma matriz, que por sua vez possui o objeto do caminho e do componente. Caminho é o nome do roteador e componente é o nome da classe, ou seja, o componente criado.

Vamos agora ver o arquivo criado pelo componente -

New-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

A classe destacada é mencionada nas importações do módulo principal.

New-cmp.component.html

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

Agora, precisamos que o conteúdo acima do arquivo html seja exibido sempre que necessário ou clicado no módulo principal. Para isso, precisamos adicionar os detalhes do roteador no app.component.html .

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>

<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>

<br />
<br/>
<router-outlet></router-outlet>

No código acima, criamos a tag do link da âncora e atribuímos o routerLink como "new-cmp" . Isso é referido em app.module.ts como o caminho.

Quando um usuário clica em novo componente , a página deve exibir o conteúdo. Para isso, precisamos da seguinte tag - <router-outlet> </router-outlet> .

A tag acima garante que o conteúdo no new-cmp.component.html seja exibido na página quando um usuário clicar no novo componente .

Vamos agora ver como a saída é exibida no navegador.

Custome Pipe-1

Quando um usuário clica em Novo componente, você verá o seguinte no navegador.

Custome Pipe-2

O URL contém http: // localhost: 4200 / new-cmp . Aqui, o new-cmp é anexado ao URL original, que é o caminho fornecido no app.module.ts e o link do roteador no app.component.html .

Quando um usuário clica em Novo componente, a página não é atualizada e o conteúdo é mostrado ao usuário sem recarregar. Apenas uma parte específica do código do site será recarregada quando clicada. Esse recurso ajuda quando temos conteúdo pesado na página e precisa ser carregado com base na interação do usuário. O recurso também oferece uma boa experiência do usuário, pois a página não é recarregada.