How to update data when changing Angular component

Asked

Viewed 901 times

0

Basically my data is updated, but when I go to another component that shows this data, they are still outdated. I have to go to another component and come back again to update them.

I tried to use the function this.router.navigateByUrl('/sites'); but it does not update the data. Apparently the ngOnInit is called but the data remains equal in this first call.

ngOnInit that should update:

ngOnInit() {
      this.es.getAllDocuments(ShowSitesComponent.INDEX, ShowSitesComponent.TYPE).then(
      response => {
        this.siteSources = response.hits.hits;
        this.sizeOfSites = this.siteSources.length;
        console.log("This is the response:", this.siteSources);
      }, error => {
        console.error(error);
      }).then(() => {
        console.log('Show Site Completed!');
      });
  }

I took a test to call this ngOnInit in the other function, regardless of the amount of times I call this ngOnInit in the other function the value is not updated, now if I click a button with a routerLink, it updates the value.

This is the function that goes back to the other component.

siteCreated(success: Boolean) {
    if (success) {
      let message = "Site adicionado, veja o log para mais informações";
      let action = "Ok";
      this.resetForm();
      this.snackBar.open(message, action, {
        duration: 5000,
      });
      this.showSites.ngOnInit();
      this.router.navigate(['/sites']); //O estranho é que isso não atualiza o valor
    } else if (!success) {
      let message = "Erro na Criação do Site";
      let action = "Ok";
      this.snackBar.open(message, action, {
        duration: 5000,
      });
    }
  }

The button that updates the component is this:

 <a routerLink="" style="text-decoration: none; color: white" routerLinkActive="active"><button
        mat-raised-button>Página Inicial</button></a>

I find it very strange this button update the dice and the this.router.navigateByUrl('/sites'); doesn’t work, technically they’re not the same thing?

I believe it has something to do with promises, but I couldn’t find any solution for this.

angular router

  • put your code

  • I put some parts to complement

  • you are trying to navigate to the same page?

  • no, I’m in a different component than what I’m calling on the router

  • Voce can create a Singleton service(forRoot) that takes care of the state of your object, and can also use Subject/subjectbehavior so that your entire application knows that there has been a change of its object

1 answer

0


After many attempts, I managed to solve using the following 'macete':

timer(1000).subscribe(x => {
    this.router.navigateByUrl('/Refresh', { skipLocationChange: true }).then(() =>
         this.router.navigate(["sites"]));
    });

Basically with a subscribe I go to a component Refresh, which is an empty component, and then it goes back to the component that I want to show the updated data, the timer determines that after 1 second these data will be updated.

If you want to update the data constantly, of course, without calling a router, because it’s a loop, you can use a interval in place of timer

Browser other questions tagged angular router

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