Le rafraîchissement de la page Angular 5 atterrit toujours sur la page d'accueil au lieu d'être sur la même page

Question

J'ai les routes suivantes dans l'application. Le problème est que si je navigue vers getEmp-by-id ou page-not-found et que j'appuie sur refresh, l'application atterrit sur app-home, mais je veux qu'elle reste sur la même page que celle où elle se trouve. Mais je veux qu'elle reste sur la même page que celle où le rafraîchissement a été effectué. Je n'implémente pas de RouteGuards, de simples navigations. Est-ce qu'il y a un moyen d'y parvenir ?

const appRoutes: Routes = [
  {path: '', component: HomeComponent,  children: [
    {path: 'app-home', component: AppHomeComponent, resolve: {ApphomeResolver : AppHomeResolver}},
    {path: 'getEmp-by-id', component: EmpComponent},
    {path: 'page-not-found', component: pageNotFoundComponent},] 
  }, 
  {path: '**', redirectTo: 'page-not-found', pathMatch: 'full'}
];

export class EmpComponent implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute, private alertService: AlertService, private employeeService: EmployeeService) { }
  ngOnInit() {}

  onSubmit() {

         this.employeeService.getEmployee(empId).subscribe(
        (data) => {

          var responseCode = JSON.parse(data).responseCode;
          var responseMessage = JSON.parse(data).responseMessage
          if (responseCode === 200) {
                this.router.navigate(['../emp-details'], { relativeTo: this.route });
          } else {
          this.router.navigate(['../page-not-found'], { relativeTo: this.route });
          }
        }, error => {
          this.router.navigate(['../page-not-found'], { relativeTo: this.route });
        });
    } else {
      this.alertService.error("Error");
    }
  }
}

Answer 1

L'une des façons de gérer les rafraîchissements de page est d'utiliser le routage par hachage. Pour mettre cela en œuvre, écrivez le code suivant dans app.module.ts :

import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
......
providers: [
    { provide: APP_BASE_HREF, useValue: '', }
    , { provide: LocationStrategy, useClass: HashLocationStrategy }
    .....
]})
export class AppModule {

}

Veuillez noter que cela ajoutera un numéro à votre itinéraire.