0

Possuo dois components na minha aplicação feita com Angular 5+. Um component é um formulário, onde preencho parâmetros que são passados num GET para minha API REST. Esse formulário (component1) recupera o JSON da API, porém preciso que após recuperar a informação ele redirecione para o uma table (meu 2º component).

No momento estou conseguindo recuperar os dados do JSON, e popular a minha Table, porém não sei como redirecionar automaticamente para a pgina de listagem APÓS o retorno da minha API.

Formulário (Component 1)

import { Component, OnInit } from '@angular/core';
import { Chamado } from '../../@core/data/chamado';
import { ChamadoService } from '../../@core/data/chamado.service';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'ngx-form-busca',
  templateUrl: './form-busca.component.html',
  styleUrls: ['./form-busca.component.scss'],
})
export class FormBuscaComponent {

  private titulo: string;
  chamados: Chamado[] = [];
  constructor(private chamadoService: ChamadoService,
    private router: Router) { }

    onFormSubmit(userForm: NgForm) {
      this.chamadoService.getChamadosBusca(userForm.controls['solucaoProposta'].
      value, userForm.controls['projeto'].value).subscribe(products => this.chamados = products);
  }
}

Listagem do retorna da API (Component 2)

@Component({
  selector: 'ngx-lista-chamados',
  templateUrl: './lista-chamados.component.html',
  styleUrls: ['./lista-chamados.component.scss'],
})
export class ListaChamadosComponent implements OnInit {
  chamados: Chamado[] = [];
  showList: boolean;
  constructor(private chamadoService: ChamadoService) {
    this.showList = false;
  }
  fetchDataFromService() {
    this.showList = true;
    this.chamados = this.chamadoService.getChamadoData();
  }

  ngOnInit() {
    this.fetchDataFromService();
  }
}

Service:

import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';
import { Http, Response } from '@angular/http';
import { Chamado } from './chamado';
import { RequestOptions } from '@angular/http';
import { Headers } from '@angular/http';
import { of } from 'rxjs/observable/of';

const API_URL = environment.apiUrl;

@Injectable()
export class ChamadoService {
    chamados: Chamado[] = [];
    constructor(private httpClient: HttpClient) {

    }

public getChamadosBusca(textoBusca: string, modulo: string): Observable<Chamado[]> {
        const params = new HttpParams()
            .set('textoBusca', textoBusca)
            .set('modulo', modulo);
        // tslint:disable-next-line:no-console
        console.log(params.toString());
        return this.httpClient.get<Chamado[]>(API_URL + 'chamado/busca/', { params }).pipe(
            tap(chamados => {
                // tslint:disable-next-line:no-console
                console.log(`fetched texto=${textoBusca}`);
                // tslint:disable-next-line:no-console
                console.log(chamados);
                this.setChamadoData(chamados);
            }),
            catchError(this.handleError('getChamados', [])),
        );
    }
  setChamadoData(data: Chamado[]) {
        this.chamados = data;
    }
  getChamadoData() {
        return this.chamados;
     }
 @param operation 
 @param result
    private handleError<T>(operation = 'operation', result?: T) {
        return (error: any): Observable<T> => {
            console.error(error);
            return of(result as T);
        };
    }     

No momento o usuário manualmente navega até a página da Component 2(lista) e aí no evento ngOnInit() a table é carregada com os dados que foram retornados na chamada do Formulário.

1 Resposta 1

1

Há 3 maneiras de você resolver esse problema:

1) Maneira mais simples: você poderia retornar o Observable do service para o component ao invés de fazer o tratamento diretamente nele:

Service.ts


myHttpRequest(){
  return this.http.get(url);
}

Component.ts


myConsumable(){
this.myService.myHttpRequest()
.subscribe(
(value) => {
...

//após completar a tabela você pode redirecionar
this.router.navigate()
}
);

2) Usando BehaviorSubject (algo como um messagebus)

Criar um service de message bus com o proposito de propagar informações entre componentes (publish/subscribe pattern)

  • Emitir um evento no serviço
  • Subscribe no seu componente para identificar quando acontece o mapeamento e redirecionar usando o router

3) Usar Redux e observar o estado :)

1
  • obrigado pelas dicas, funcionou perfeitamente. 17/05/2018 às 17:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .