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.

Answer 1

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.