load data in child component using resolver after data updated in the component

Question

i have a component 'update_profile' in angular which loads data using resolver service.

i am also calling 'update_profile' in another component 'complete_profile' using the selector. i am initiating the component by ngIf when editing is required.

to enable loading the data in 'complete_profile' i have also injected the resolver in parent component.

const routes: Routes = [
  {
    path: "",
    component: OrganiserLayoutComponent,
    children: [
      { 
        path: "complete_profile", 
        component: MyProfileComponent, 
        resolve: { profileDetails: UpdateProfileResolverService } 
      },
      {
        path: "update_profile",
        component: UpdateProfileComponent,
        resolve: { profileDetails: UpdateProfileResolverService },
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})

update_profile component

ngOnInit() {
    this.dataSubscription = this.activatedRoute.data.subscribe(
    (data: { profileDetails: any }) => {
      this.profileData = data.profileDetails["data"];
      console.log(this.profileData);
      },
    );
}

resolver service

import { Injectable } from '@angular/core';
import { Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { AppServiceService } from './../../../common/services/app-service.service';
import { AuthServiceService } from './../../../common/services/auth-service.service';

@Injectable({providedIn:'root'})
export class UpdateProfileResolverService implements Resolve<any> {
  constructor(public appService: AppServiceService, public auService: AuthServiceService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    let currentUser;
    this.auService.User.subscribe(user=>{
      if(user){
        currentUser=user.token;
      }
    }).unsubscribe();
    return this.appService.getParams2('/organizer/', currentUser.Id);
  }
}

update_profile being called in complete_profile

<app-update-profile *ngIf="isShown"></app-update-profile>

when i am going to update_profile route, my data is always updated.. that's ok. but in complete_profile component, the update_profile is shown by applying ngIf directive on update_profile selector, and whenever i click a button to give truthy condition to show the update_profile component inside complete_profile component, the data is not updated. it shows previous data which was retrieved by resolver on complete_profile initialisation.

i understand that the resolvers only resolve data when the route is changed. but i need resolved updated data whenever update_profile component is initialised.

you can use parent chilc relationships between the complete_profile and update_profile component to send and receive data between components. — Gopal, Sep 28 '20 at 04:58
i am not passing data from one component to another. infact i am showing the whole component as a part of another. the problem i am facing is after i close the component after updating data in update_profile component which is inside complete_profile component, the updated data is not received from resolver, when i reopen the update_profile component. — shubh kr, Sep 28 '20 at 05:16

score 0 · Answer 1 · answered Sep 28 '20 at 10:45

Your resolver code is incorrect.

import { Injectable } from '@angular/core';
import { Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { AppServiceService } from './../../../common/services/app-service.service';
import { AuthServiceService } from './../../../common/services/auth-service.service';
import { take, map } from 'rxjs/operators'

@Injectable({providedIn:'root'})
export class UpdateProfileResolverService implements Resolve<any> {
  constructor(public appService: AppServiceService, public auService: AuthServiceService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){

    return this.auService.User.pipe( 
      take(1),
      map(user => this.appService.getParams2('/organizer/', user?.Id);
    )
  }
}

Essentially, you need to return the call to this.appService.getParams2 inside your subscribe block, otherwise the variable you had for currentUser will be undefined.

actually this is not the problem, the currentUser is available and no problem is caused due to that. what i want is, to fetch data from route resolver, without refreshing the page. i got a code `let currentUrl=this.router.url; this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => this.router.navigate([currentUrl]) );` this snippet kind of works, but causes a small refresh of the page. Do you have any better form of this? — shubh kr, Sep 29 '20 at 08:13
The `resolve` function in a resolver only executes when you change routes. What's the data you want to return? Is it `this.appService.getParams2('/organizer/', user?.Id)` ? If you want information on your page to refresh without rerouting, then a resolver is the wrong thing to use. You probably want to be using a service. — Robert Dempsey, Sep 29 '20 at 09:53

load data in child component using resolver after data updated in the component

1 Answers1