alteracao_de_fotos - VWJavascript/Alurapic GitHub Wiki
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.