utilizando_nosso_servico - VWJavascript/Alurapic GitHub Wiki

Utilizando nosso serviço

Primeiro vamos alterar ListagemComponent. Vamos substituir a dependência de Http por FotoService, mas para isso precisamos importar FotoService antes. Inclusive, vamos mudar o tipo da propriedade fotos que estava Object[] para FotoComponent[] já que o método FotoService.lista retornará uma lista do tipo FotoComponent.

// alurapic/client/app/listagem/listagem.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { FotoComponent } from '../foto/foto.component';
import { FotoService } from '../foto/foto.service';

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

    fotos: FotoComponent[] = [];

    constructor(service: FotoService) {

        service.lista()
            .subscribe(
                fotos => this.fotos = fotos,
                erro => console.log(erro)
            );
    }
}

Por fim, vamos alterar CadastroComponent:

// 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';

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

    foto: FotoComponent = new FotoComponent();
    service: FotoService;
    meuForm: FormGroup;

    constructor(service: FotoService, fb: FormBuilder) {

        this.service = service;

        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();
                console.log('Foto salva com sucesso');
            }, erro => {
                console.log(erro);
            });
    }
}