javascript - Angular 5 页面刷新总是登陆首页而不是在同一页面

标签 javascript angular angular2-routing angular5

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

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");
    }
  }
}

最佳答案

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

}

请注意,这会将 # 添加到您的 route 。

关于javascript - Angular 5 页面刷新总是登陆首页而不是在同一页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49700466/

相关文章:

angular - 在 Angular2 的路由器中获取事件路由上的组件实例?

javascript - 无法设置矩阵单元格值

javascript - 嵌套 <img> 标签时查找元素包含文本

javascript - NGRX/REDUX : update value in deep object by json path

javascript - 未定义数组

javascript - Typescript 中的导出和导入如何工作?

javascript - 轻量级倾斜 onClick/JS 或 CSS3

javascript - 如何从 Firebase 数据库集合中准备键和值

Angular 2复杂的嵌套路由

angular - 在 Angular 2 的路由器导出内从一个组件链接到另一个组件?