How to update the on-screen data in Angular?

Asked

Viewed 61 times

0

Hello, Everybody!

I am working with a web system in Angular, which has a search bar in the header. Seen this, when the search button is clicked calls the following function:

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

In the 'detailed' part, there is the following code:

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;
  }

}

When the view is initialized the resolve below to make the http request and return the requested order details:

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);
    }

}

So far everything is working normally, in case I search the order "1234" in the view is displayed all the order details. But if I search for the "1235" request in the URL it is updated, but the view continues with the same information.

Example:

  • Home

Home do site

  • Search for the application 1252557

Pesquisa do Pedido 1252557

  • Search for the Request 1252558

Pesquisa do Pedido 1252557

If I refresh the page the data is updated, I need a method to update only the component.

angular front-end

  • I haven’t found where you resolve the return searchOrderById subscribe, could you add? where you call that service "resolve" method?

  • @Pedrohenriquecndidoferreira, The resolver is implemented on the route, making the page load only when the data is available. Previously it was not using the solve, however the reported problem occurred in the same way.

  • I don’t think it’s right to do this on the route, the ideal is to move it inside the Component, the route simply has the function of passing the data through the url

  • I will post an answer with an ideal solution p/ your problem may be? But you’ll have to modify that from there, I don’t think it’s right to go through the routes

  • @Pedrohenriquecndidoferreira, the use of resolver is common, having this purpose to load the page only when the requested data at http are available. However, anyway, I accept suggestions to solve the problem.

1 answer

1


I managed to solve my problem!

In the "detailed" component I removed the ngOnInit() method and put the http request in the constructor, making the request whenever the "Router" detects any change in the URL, thus:

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;

}

Browser other questions tagged angular front-end

You are not signed in. Login or sign up in order to post.