0

Olá, Pessoal!

Estou trabalhando com um sistema web em Angular, no qual possui uma barra de pesquisa no header. Visto isso, quando o botão de busca é clicado chama a seguinte função:

onSearch(){ 
    this.router.navigate(['detalhesPedido',  this.pedido]);
  }

No componente 'detalhesPedido', há o seguinte código:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Order } from '../../shared/search-order/order';

@Component({
  selector: 'app-detalhes-pedido',
  templateUrl: './detalhes-pedido.component.html',
  styleUrls: ['./detalhes-pedido.component.css']
})
export class DetalhesPedidoComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) { }

  pedidos: Order[];
  public paginaAtual = 1;

  ngOnInit(): void {
    this.pedidos = this.activatedRoute.snapshot.data.pedido;
  }

}

Quando a view é inicializada é utilizado o resolver abaixo para fazer a requisição http e retornar os detalhes do pedido buscado:

import { Injectable } from "@angular/core";
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
import { Observable } from "rxjs";

import { Order } from "./order";
import { SearchOrderService } from "./search-order.service";

@Injectable({providedIn: 'root'})
export class SearchOrderResolver implements Resolve<Observable<Order[]>>{

    constructor(private service: SearchOrderService){}

    pedido: string;
    pedidoPesquisa = {
        pedido:""
      };

    resolve(route: ActivatedRouteSnapshot, state:RouterStateSnapshot){
        this.pedidoPesquisa.pedido = route.params.pedido;
        this.pedidoPesquisa.pedido = this.pedidoPesquisa.pedido.replace(/\s/g, '');
        return this.service.searchOrderById(this.pedidoPesquisa);
    }

}

Até ai tudo está funcionando normalmente, caso eu pesquise o pedido "1234" na view é exibida todos os detalhes do pedido. Porém caso eu busque o pedido "1235" na URL é atualizado, mas a view continua com as mesmas informações.

Exemplo:

  • Home do site

Home do site

  • Pesquisa do pedido 1252557

Pesquisa do Pedido 1252557

  • Pesquisa do Pedido 1252558

Pesquisa do Pedido 1252557

Se eu efetuar o refresh da pagina os dados são atualizados, preciso de um método para atualizar apenas o componente.

5
  • Eu não achei onde vc resolve o subscribe do retorno do searchOrderById, poderia adicionar? onde vc chama esse method "resolve"do service? Commented 18/02/2021 às 15:51
  • @PedroHenriqueCndidoFerreira, O resolver é implementado na rota, fazendo com que a pagina carregue apenas quando os dados estão disponíveis. Anteriormente não estava utilizando o resolver, porém o problema relatado ocorria da mesma maneira.
    – Renan21_
    Commented 18/02/2021 às 17:33
  • Não acho que o correto seja fazer isso na rota, o ideal é mover isso pra dentro do component, a rota simplesmente tem a função de passar os dados pela url Commented 18/02/2021 às 17:40
  • Vou postar uma resposta com uma solução ideal p/ o seu problema pode ser? Mas vai ter que modificar isso dai, n acho que o correto seja realizar pelas rotas Commented 18/02/2021 às 17:47
  • @PedroHenriqueCndidoFerreira, a utilização de resolvers é comum, tendo este fim de carregar a pagina apenas quando os dados requisitados no http estiverem disponíveis. Porém, de qualquer forma, aceito sugestões para resolver o problema.
    – Renan21_
    Commented 18/02/2021 às 21:21

1 Resposta 1

1

Consegui resolver meu problema!

No componente "detalhesPedido" eu removi o método ngOnInit() e coloquei a requisição http no construtor, efetuando o request sempre que o "Router" detecta alguma mudança na URL, dessa maneira:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Order } from '../../shared/search-order/order';

@Component({
  selector: 'app-detalhes-pedido',
  templateUrl: './detalhes-pedido.component.html',
  styleUrls: ['./detalhes-pedido.component.css']
})
export class DetalhesPedidoComponent {

  constructor(private activatedRoute: ActivatedRoute, private router: Router) { 
    router.events.subscribe(x => {
      this.pedidos = this.activatedRoute.snapshot.data.pedido;
    });
  }

  pedidos: Order[];
  public paginaAtual = 1;

}

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 .