URL-адрес меняется, но контент не обновляется

Question

У меня есть приложение angular 8. И некоторые предметы с идентификаторами. Хорошо, что если вы выберете элемент, URL изменится. Но фактический предмет не изменится. Итак, что я имею в виду, у меня есть несколько предметов друг под другом, каждый из которых имеет уникальный идентификатор. Если вы нажмете первый раз на элемент, вы увидите правильный элемент. Но если вы щелкнете затем по другому элементу, будет показан предыдущий элемент, а не фактический элемент, но URL-адрес изменится.

URL-адрес, например, такой:

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

и другой идентификатор выглядит так:

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

Итак, у меня есть это как ссылка для элемента:

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

, и это у меня есть для маршрутизации:

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

и это ts компонента:

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'];
    }); */

  }

Так что я должен изменить? Спасибо

Это мой app.routing.module:

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

Я пытаюсь так:

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

Но это не работает. Таким образом, содержимое не меняется

как это:

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

Это может быть полезно:

В вашем app.module.ts добавьте это в провайдеры.

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

Answer 2

Вам необходимо подписаться на событие данных маршрута, чтобы вы могли получать последние обновленные данные, полученные от вашего распознавателя.

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

) { 
  this.route.data.subscribe(() => {
    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();
  });

}

Для повторного запуска преобразователя добавьте это runGuardsAndResolvers

.

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

Answer 3

Вы можете использовать

  location.subscribe(val => {
            console.log(val)
        });