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);
});
}
}