Url 正在更改，但内容未更新

Question

我有一个 angular 8 应用程序。还有一些带有 id 的项目。好处是，如果你 select 一个项目 url 将会改变。但实际项目不会改变。所以我的意思是我有一些项目在彼此之下，每个项目都有一个唯一的 id。如果您第一次单击某个项目，您将看到正确的项目。但是，如果您随后单击另一个项目，将显示前一个项目而不是实际项目，但 url 正在改变。

例如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

所以我将此作为 link 项目：

  <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

您可以使用

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

Answer 2

这很有用：

在您的 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 3

您需要订阅路由数据事件，以便您可以获取来自解析器的最新更新数据

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

Url 正在更改，但内容未更新

Url is changing, but content is not updating

javascript

typescript

angular-routing

angular-material

angular