Url is changing, but content is not updating

Question

I have a angular 8 application. And some items with id's. The good thing is that if you select a item the url will change. But the actual item will not change. So what I mean with that I have some items under each other with each item an unique id. If you click the first time on a item you will see the correct item. But if you click then on a other item, the previous item will been shown and not the actual item, but the url is changing.

the url is for example like this:

http://localhost:4200/en/dossier/06637e72-8915-4735-9400-4ef7705194ea/item/2cdc2f5b-e9ff-4fbd-a1a6-30a2e357d69b

and other id is like this:

http://localhost:4200/en/dossier/06637e72-8915-4735-9400-4ef7705194ea/item/6bc0331b-7577-4d2c-8d02-a8a090adea82

So I have this as link for the item:

  <a mat-icon-button [routerLink]="['../', dossier.id, 'item', item.id]" i18n-title title="Edit">
          <mat-icon>editggg</mat-icon>
        </a>

and this I have for the routing:

{
    path: ':dossierId',
    component: ViewComponent,
    children: [
      { path: 'item/:dossierItemId', component: ItemComponent },
      { path: 'item/new/:dossierItemType', component: ItemComponent },
    ],
    resolve: {
      dossier: DossierResolver,
      dossierItems: DossierItemsResolver
    }
  },

and this is the ts of the component:

export class ViewComponent implements OnInit {
  dossier: DossierDto;
  dossierItems: DossierItemDto[] = [];
  itemSearchMatches = {};
  typeSearchMatches = {};
  formBuilder = new FormBuilder();
  editDossierForm: FormGroup;
  globalEditDossierErrors: ValidationErrors;
  itemTypes = DossierItemTypeDto;
  searchQueryHolder = '';
  // @ViewChild('tabGroup') tabGroup;
  selectedTabIndex: number;
  selectedTab = 0;
  showTemplate = false;

  constructor(
    private dossierService: DossierService,
    private uiStateService: UIStateService,
    private route: ActivatedRoute,
    private errorProcessor: ErrorProcessor

  ) {
    this.dossier = route.snapshot.data.dossier;
    this.dossierItems = route.snapshot.data.dossierItems;
    this.searchDossieritems(null);
    this.editDossierForm = this.formBuilder.group({
      name: this.formBuilder.control(this.dossier.name, [Validators.required])
    });
    this.editDossierForm.disable();
  }


  ngOnInit(): void {
     const state = this.uiStateService.getState();
     if (state) {
      this.selectedTab = state.tabState || 0; //If there is no state
    }
     this.setTabState(state.tabState);
/*
     this.route.params.subscribe((params: Params) => {
      this.itemTypes.ActionStep = params['itemTypes.ActionStep'];
    }); */

  }

So what I have to change? Thank you

This is my app.routing.module:

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    paramsInheritanceStrategy: 'always'
})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I try it like this:

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload',
    paramsInheritanceStrategy: 'always'
})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

But this doesnt work. So the content is not changing

like this:

import { RouteReuseStrategy, ActivatedRouteSnapshot } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: import("@angular/router").ActivatedRouteSnapshot): boolean {
    throw new Error("Method not implemented.");
  }
  store(route: import("@angular/router").ActivatedRouteSnapshot, handle: import("@angular/router").DetachedRouteHandle): void {
    throw new Error("Method not implemented.");
  }
  shouldAttach(route: import("@angular/router").ActivatedRouteSnapshot): boolean {
    throw new Error("Method not implemented.");
  }
  retrieve(route: import("@angular/router").ActivatedRouteSnapshot): import("@angular/router").DetachedRouteHandle {
    throw new Error("Method not implemented.");
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false; // default is true if configuration of current and future route are the same
  }
}

Answer 1

This can be useful:

In your app.module.ts, add this in providers.

{ provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  store(route: ActivatedRouteSnapshot, handle: {}): void {

  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  retrieve(route: ActivatedRouteSnapshot): {} {
    return null;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false; // default is true if configuration of current and future route are the same
  }
}