Question

我在应用程序中有以下路由。这里的问题是，如果我导航到说getEmp-by-id或page-not-found并点击刷新，那么应用程序将登陆app-home。但我希望它保持在刷新的同一页面上。我没有实现任何RouteGuard，简单的导航。有没有办法可以实现这个目标。

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

处理页面刷新的一种方法是使用散列路由。要实现此功能，请在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 {

}

请注意，这会在您的路线中添加＃。

Angular 5页面刷新始终位于主页中，而不是位于同一页面上

1 个答案: