item.component.html
deletarItem(item: Item) {
const index = this.listaDeCompra.findIndex((i) => i.id === item.id);
this.listaDeCompra.splice(index, 1);
}
item.component.ts
deletarItem() {
this.listaDeCompraService.deletarItem(this.item);
}
lista-de-compra.service.ts
<fa-icon class="delete-icon" (click)="deletarItem()" [icon]="faTrash" ></fa-icon>
Há alguma diferença prática nesse atalho que fiz no código para com a forma que o professor explicou utilizando o @Output?
Oi Lorenzo,
Excelente questionamento! 🧐
A diferença entre sua abordagem e a do professor com @Output reside principalmente no desacoplamento e na gestão do estado da sua aplicação.
Na sua solução, o componente item.component.ts manipula diretamente a lista de compra ao usar o método splice no array listaDeCompra. Isso significa que o componente tem conhecimento direto da estrutura de dados e da lógica de remoção.
Já a abordagem com @Output promove um desacoplamento maior. O componente item.component.ts emite um evento quando o botão de deletar é clicado. O componente pai, que possui a lista, recebe esse evento e então realiza a remoção do item. Isso torna o componente item mais reutilizável, pois ele não precisa conhecer a estrutura de dados ou a lógica de deleção.
Exemplo Prático:
item precisa saber qual lista manipular. Isso pode gerar problemas se você precisar usar esse componente em outro lugar com uma lista diferente.@Output: O componente item apenas emite um evento, sem se preocupar com qual lista está sendo modificada. O componente pai decide o que fazer com esse evento.Vantagens do @Output:
item isoladamente, pois ele não depende de uma lista específica.Em resumo, sua abordagem funciona, mas a do professor com @Output é mais escalável e promove um design mais limpo e desacoplado, o que é considerado uma boa prática em Angular. 👍
Veja mais: Documentação do Angular sobre @Output
Continue explorando e aprofundando seus conhecimentos! 💪
Caso este post o tenha ajudado, por favor,
marcar como solucionado ☑️.
Bons Estudos! 🤓