Incluímos fotos, mas não alteramos ainda Hoje temos o componente Cadastro que possui um formulário para incluirmos novas fotos em nossos sistema. Contudo, apenas incluir não é suficiente, precisamos também alterar fotos. No lugar de criarmos um novo componente com a finalidade de alteração, utilizaremos o mesmo.

A ideia é selecionarmos uma foto em ListagemComponent através de um click e seus dados serem exibidos em CadastroComponent para que possamos realizar as alterações necessárias. Em ListagemComponent, vamos tornar nosso FotoComponent clicável envolvendo-o pela tag , inclusive já utilizaremos a diretiva routerLink para realizar uma navagação para Cadastro:

<!-- alurapic/client/app/listagem/listagem.component.html -->

<!-- código anterior omitido -->

<div class="row">
    <painel *ngFor="let foto of fotos | filtroPorTitulo: textoProcurado.value" titulo="{{foto.titulo | uppercase}}"  class="col-md-2">

        <a [routerLink]="['/cadastro']">
            <foto titulo="{{foto.titulo}}" url="{{foto.url}}"></foto>
        </a>

        <button class="btn btn-danger btn-block" (click)="remove(foto)">Remover</button>
    </painel>
</div><!-- fim row -->

<!-- código posterior omitido -->

Quando recarregamos nossa página e clicarmos no link somos levados para o componente CadastroComponent, no entanto nosso formulário não é preenchido com os dados da foto que selecionamos. Uma maneira de preencher o formulário é buscarmos do servidor a foto que foi clicada, mas precisamos pelo menos de algum identificador. Nosso servidor esta preparado para retornar uma foto dado o seu ID através de requisições como:

v1/fotos/10
v1/fotos/7

Veja que é uma URL idêntica a que usamos para remover fotos, só que dessa vez nosso servidor está preparado para responder ao verbo GET e não DELETE.

Precisamos fazer com que nosso componente CadastroComponent receba o ID da foto que clicamos em ListagemComponent, mas se digitarmos no navegador endereços como localhost:3000/cadastro/10 somos redirecionados para Principal, porque o endereço não é uma rota válida. Apesar disso, podemos alterar a configuração da nossa rota fazendo com que ela aceite parâmetros:

Precisamos alterar nossa configuração de rotas em app.routes.ts:

// alurapic/client/app/app.routes.ts


import { RouterModule, Routes } from '@angular/router';
import { ListagemComponent } from './listagem/listagem.component';
import { CadastroComponent } from './cadastro/cadastro.component';

const appRoutes: Routes  = [
  { path: '', component: ListagemComponent },
  { path: 'cadastro/:id', component: CadastroComponent },
  { path: '**', redirectTo: ''}
];

export const routing = RouterModule.forRoot(appRoutes);

Veja que mudamos o path na configuração de nossas rotas. Temos o valor cadastro/:id. O :id é um curinga como aqueles de baralho que podem assumir diferentes valores. Sendo assim, rotas como /cadastro/1 ou /cadastro/10 serão aceitas, inclusive seremos capazes de acessar o valor do curinga em nosso componente Cadastro.

Vamos testar digitando diretamente em nosso browser a URL:

localhost:3000/cadastro/5

Excelente, a página de cadastro é exibida, porém resolvemos um problema e criamos outro. Se acessarmos a URL localhost:3000/cadastro ou clicamos no botão "Nova foto", somos direcionados para o componente Principal, porque a rota que acessamos não é mais válida. Precisamos que ela continue existindo, porque quando estamos cadastrando uma nova foto, não temos ID ainda e precisamos acessar CadastroComponent sem passar um ID.

Vamos desfazer a alteração que acabamos de realizar na configuração das nossas rotas e adicionar outra com o id:

// alurapic/client/app/app.routes.ts

// código anterior omitido

import { RouterModule, Routes } from '@angular/router';
import { ListagemComponent } from './listagem/listagem.component';
import { CadastroComponent } from './cadastro/cadastro.component';

const appRoutes: Routes  = [
  { path: '', component: ListagemComponent },
  { path: 'cadastro', component: CadastroComponent },
  { path: 'cadastro/:id', component: CadastroComponent },
  { path: '**', redirectTo: ''}
];

export const routing = RouterModule.forRoot(appRoutes);

Agora conseguimos acessar o componente Cadastro tanto para a inclusão quanto para alteração de fotos, mas ainda temos um problema a resolver. Como teremos acesso ao ID da foto quando este for passado para o componente CadastroComponent? Lembre-se que ele precisa dessa informação para buscar a foto que desejamos alterar do servidor.