Navegação do lado do componente

Podemos melhorar a experiência do usuário voltando automaticamente para ListagemComponent toda vez que uma foto for alterada. Teremos que realizar uma navegação através do método cadastrar de CadastroComponent. Mas como realizaremos essa navegação uma vez que o routerLink é usado apenas em nosso template? Que tal solicitarmos ao Angular o "cara" que sabe tudo sobe rota do nosso sistema, o Router:

// alurapic/client/app/cadastro/cadastro.component.ts

import { Component, Input } from '@angular/core';
import { FotoComponent } from '../foto/foto.component';
import { Http, Headers } from '@angular/http';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { FotoService } from '../foto/foto.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
    moduleId: module.id,
    selector: 'cadastro',
    templateUrl: './cadastro.component.html' 
})
export class CadastroComponent { 

    foto: FotoComponent = new FotoComponent();
    service: FotoService;
    meuForm: FormGroup;
    route: ActivatedRoute;
    mensagem: string = '';
    router: Router;

    constructor(service: FotoService, fb: FormBuilder, route: ActivatedRoute, router: Router) {

        this.router = router;
        this.route = route;
        this.service = service;

        // código posterior

Pronto, agora que temos uma instância de Router podemos solicitar ao método navigate uma navegação. O método recebe como parâmetro um array com um string que é nossa rota configurado em app.routes.ts:

// alurapic/client/app/cadastro/cadastro.component.ts

import { Component, Input } from '@angular/core';
import { FotoComponent } from '../foto/foto.component';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { FotoService } from '../foto/foto.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
    moduleId: module.id,
    selector: 'cadastro',
    templateUrl: './cadastro.component.html' 
})
export class CadastroComponent { 

    foto: FotoComponent = new FotoComponent();
    service: FotoService;
    meuForm: FormGroup;
    route: ActivatedRoute;
    mensagem: string = '';
    router: Router;

    constructor(service: FotoService, fb: FormBuilder, route: ActivatedRoute, router: Router) {

        this.router = router;
        this.route = route;        
        this.service = service;
        this.route.params.subscribe(params => {

            let id = params['id'];

            if(id) {

                this.service.buscaPorId(id)
                    .subscribe(
                        foto => this.foto = foto,
                        erro => console.log(erro));    
            }            
         });

        this.meuForm = fb.group({
            titulo: ['', Validators.compose(
                [Validators.required, Validators.minLength(4)]
            )],
            url: ['', Validators.required],
            descricao: [''],
        });
    }

    cadastrar(event) {
        event.preventDefault();
        console.log(this.foto);

        this.service.cadastra(this.foto)
            .subscribe(() => {
                this.foto = new FotoComponent();
                this.router.navigate(['']);
            }, erro => {
                console.log(erro);
            });
    }
}

Experimente alterar algumas fotos. Você deve ter reparado que tanto na alteração quanto na inclusão estamos sendo direcionados para ListagemComponent e que isso deveria acontecer apenas com a alteração. Não se preocupe com isso por agora, pois veremos uma solução no próximo capítulo.