1
resposta

duvida com @Input e @Output

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>
1 resposta

Olá, Willian! Tudo bem?

Muito massa essa sua prática, parabéns!

Não é possível fazer o que você quer pelo router-outlet, e para obter esse resultado de passar dados para a próxima página, você não conseguiria com @Input e @Output.

O que geralmente fazemos é usar services, mas isso também porque os dados costumam estar em uma API. Nesse caso, o que você pode fazer é criar um mock de uma API, ou dos dados.

Ou seja, pode criar um Service e uma propriedade nele com os dados. O Service deve ser injetado na raiz da aplicação, e por isso os dados ficam persistidos durante o ciclo de vida.

Outra solução é usar o json-server para criar um servidor que replica uma API.

Espero ter ajudado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software