Olá, estou desenvolvendo um CRUD baseado no que aprendemos no curso, e estou com uma dificuldade de transferir os dados de uma pagina para outra, exemplificando, quando clico em editar, gostaria que na pagina de editar subisse os dados correspondentes.
No curso é utilizado o @Output para "Enviar os dados" e o @Input para receber os dados, mas todos trafegando através do app-component. Teria como fazer isso, sem ser pelo app-component? tendo em vista que estou utilizando o Router-Outlet.
Segue a estrutura do código.
List-component.ts
import { Enterprise } from '../../models/enterprises';
import { Component, OnInit, Output,EventEmitter } from '@angular/core';
import { EnterpriseService } from 'src/app/service/enterprise.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss'],
})
export class ListComponent implements OnInit {
enterprises: any[];
@Output() recebe = new EventEmitter<any>();
uuid: string;
name: string;
category: string;
blocked: boolean;
timestamp: string;
constructor(private service: EnterpriseService, private router: Router) {}
ngOnInit() {
this.service.listAllEnterprises().subscribe((enterprises: Enterprise[]) => {
console.table(enterprises);
this.enterprises = enterprises;
});
const valorEditar = {
uuid: this.uuid,
name: this.name,
blocked: this.blocked,
category: this.category,
timestamp: this.timestamp
};
this.recebe.emit(valorEditar);
}
listagem(pageName: string) {
this.router.navigate([`${pageName}`]);
}
deletar(enterprise: Enterprise) {
this.service.deleteEnterprise(enterprise).subscribe(
(result) => {
console.log(result);
},
(error) => console.log(error)
);
}
}
list-component.html
<table class="tabela">
<thead class="tabela__cabecalho">
<th class="tabela__cabecalho__conteudo">UUID</th>
<th class="tabela__cabecalho__conteudo">Data</th>
<th class="tabela__cabecalho__conteudo">Ações</th>
</thead>
<tbody *ngIf="enterprises?.length > 0; else listaVazia">
<tr class="tabela__linha" *ngFor="let enterprise of enterprises">
<td class="tabela__conteudo" >{{enterprise.uuid }}</td>
<td class="tabela__conteudo" >{{ enterprise.timestamp}}</td>
<button class="botao" (click)="listagem('edit-enterprise')" type="submit">Editar</button>
<button class="botao" (click)="deletar(enterprise)" type="submit">Deletar</button>
</tr>
</tbody>
</table>
<div class="tabela">
<button class="botao" (click)="listagem('create-enterprise')" type="submit">Cadastrar</button>
</div>
<ng-template #listaVazia>
<p>Nenhuma empresa cadastrada</p>
</ng-template>
Edit-Component.ts
import { EnterpriseService } from 'src/app/service/enterprise.service';
import { Component, OnInit,Input } from '@angular/core';
import { Enterprise } from '../models/enterprises';
import { Router } from '@angular/router';
@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.scss']
})
export class EditComponent implements OnInit {
@Input() receiveEnterprises:any;
uuid: string;
name: string;
category: string;
blocked: boolean;
timestamp: string;
constructor(private service: EnterpriseService,private router: Router
) { }
ngOnInit() {
}
listagem(pageName:string){
this.router.navigate([`${pageName}`]);
}
edit() {
console.log('Valor de blocked ' + this.blocked);
const update: Enterprise = {
uuid: this.uuid,
name: this.name,
category: this.category,
blocked: this.blocked,
timestamp: new Date(),
};
this.service.updateEnterprise(update).subscribe(
(result) => {
console.log(result);
},
(error) => console.log(error)
);
}
}
edit-component.html
<app-edit [receiveEnterprises]="receiveEnterprises"></app-edit>
<section class="container">
<form class="formulario" (ngSubmit)="edit()">
<h2 class="formulario__titulo">Atualizar Empresa</h2>
<div class="form-field">
<label class="form-field__label" for="uuid">UUID</label>
<input class="form-field__input" id="uuid" type="text" [(ngModel)]="uuid" name="uuid" value="" />
</div>
<div class="botao-wrapper">
<button class="botao" name="atualizar" id="atualizar" type="submit">Atualizar</button>
</div>
<br>
<div class="botao-wrapper">
<button class="botao" name="redirect" id="redirect" (click)="listagem('list-enterprise')">Lista</button>
</div>
</form>
</section>