javascript - 网址正在更改，但内容未更新

Question

我有一个 Angular 8 应用程序。还有一些带有 id 的项目。好处是，如果您选择一个项目，URL 将会改变。但实际项目不会改变。所以我的意思是，我有一些项目在彼此之下，每个项目都有一个唯一的 ID。如果您第一次单击某个项目，您将看到正确的项目。但是，如果您单击其他项目，则会显示前一个项目，而不是实际项目，但 url 会发生变化。

网址例如是这样的:

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

其他id是这样的:

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