Angular 2 - Cadastro de Clientes - VIII

 Neste artigo vou mostrar como criar um cadastro de clientes e fazer o CRUD usando o Angular 2 e o Visual Studio Code.

Neste artigo (veja o artigo anterior aqui) vamos definir a navegação mestre-detalhes e utilizar o componente routerlink com parâmetros, ou seja, vamos passar parâmetros para as nossas rotas.

Definindo a navegação mestre-detalhes :  Passando parâmetros para as rotas

Vamos definir o que desejamos obter:

Vamos então abrir o arquivo clientes-lista-component.html e alterar o código do arquivo conforme o código em azul mostrado abaixo:

<div class="container">
   <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
          <a routerLink="/cliente/salvar" class="btn btn-success">Novo</a>
          <table class="table table-striped table-hover">   
              <thead>
                  <tr>
                    <th>Nome</th>
                    <th>Email</th>
                    <th>Telefone</th>
                    <th>Deletar</th>
                  </tr>
              </thead>
              <tbody>  
                <tr *ngFor = "let c of clientes" [routerLink]= "['/cliente/salvar',c.id]">
                    <td>{{c.nome}}</td>
                    <td>{{c.email}}</td>
                    <td>{{c.telefone}}</td>
                    <td><button class="btn btn-danger">Deletar</button></td>
                </tr>
              </tbody>
          </table>
      </div>
   </div>
</div>

O que foi feito neste código ?

Definimos um routerLink na linha onde iteramos sobre os elementos do array clientes.

A notação [routerlink]= indica que estamos usando uma proprety binding e que estamos atribuindo um array contendo a rota que desejamos usar : '/cliente/salvar'  e o respectivo id do cliente que será obtido do código c.id.

Ao testar a nossa aplicação e clicarmos em um item da lista exibida iremos obter o seguinte resultado:

Temos o seguinte erro :  Cannot match any routes. Url Segment : 'Cliente/salvar/2'

Ou seja, ao clicar no cliente com id igual a 2 passamos o parâmetro 2 para a rota definida : '/cliente/salvar/2' mas não temos uma rota definida que atenda esse roteamento.

Vamos então criar uma nova rota para atender esse roteamento. Abra o arquivo cliente-routing.module.ts e altere o código incluindo o código em azul como mostrado a seguir:

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

import { ClientesListaComponent} from './clientes-lista.component'
import { ClienteDetalheComponent} from './cliente-detalhe.component'

const clienteRoutes: Routes =[
  {
      path : 'cliente',
      component: ClientesListaComponent
  },
  {
      path : 'cliente/salvar',
      component: ClienteDetalheComponent
  },
  {
      path : 'cliente/salvar/:id',
      component: ClienteDetalheComponent
  }
]

@NgModule({
    imports: [
        RouterModule.forChild(clienteRoutes)
    ],
    exports : [RouterModule]
})
export class ClienteRoutingModule {}
 

Criamos uma nova rota onde usamos o path para definir a url : 'cliente/salvar/:id' onde o :id indica que estamos capturando o parâmetro passado, que no exemplo é o id do cliente.

Feita essa alteração, quando testamos novamente a nossa aplicação, ao clicar em um cliente da lista, veremos a página de detalhes e a url indicando o caminho da rota com o id do cliente selecionado:

Tudo bem. Esta funcionando mas observe que a página não esta exibindo os dados do cliente selecionado.

Então precisamos capturar o id passado como parâmetro na rota e obter o cliente com esse id e exibir suas informações na página de detalhe.

Vamos fazer isso no próximo artigo.

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti