后退按钮返回登录页面,而不是角度4的首页

时间:2018-08-21 21:56:12

标签: javascript angular back-button angular4-router

我在浏览器上按下后退按钮时遇到了奇怪的问题,当我单击登录页面后,它进入了主页。

在主页上,当我单击“报告”页面时,我具有菜单选项,例如报告和销售。

我的问题是,当我单击报告页面上的浏览器后退按钮时,它会转到登录页面而不是主页

主页的URL:/ localhost:4200 / home

报告的URL页面:/ localhost:4200 / home / monthlyreport / my

我已经为下面的浏览器后退按钮编写了代码

import { PlatformLocation, Location } from '@angular/common'

constructor(private location: PlatformLocation, private loc: Location) {

      location.onPopState(() => {
       //window.history.back();
        this.loc.back(); // tried with this one but no result
     });
}

请问有没有人可以帮助我如何使用angular 4返回上一页  预先非常感谢。.

更新的登录操作方法

   const routes: Routes = [
  {
    path: "",
    redirectTo: "login",
    pathMatch: "full"
  },
  {
    path: "login",
    component: LoginComponent
  },
  {
    path: "error/:errorId",
    component: ErrorComponent
  },
  {
    path: "logout",
    component: LogoutComponent
  },
  {
    path: "home",
    data: {
      breadcrumb: "Home"
    },
    component: HomeComponent,
   }
   children: [
     {
        path: "monthlyreport/:type",
        data: {
          breadcrumb: "Reports"
        },
        component: MonthlyReportComponent,
        canActivate: [AuthGuardService]
      }
    ]
 ];

1 个答案:

答案 0 :(得分:0)

我相信您应该按照以下方式重写代码:

  {
    path: "home",
    data: {
      breadcrumb: "Home"
    },
    component: HomeComponent,
    children: [
          {
            path: "monthlyreport/:type",
            data: {
              breadcrumb: "Reports"
            },
            component: MonthlyReportComponent,
            canActivate: [AuthGuardService]
          }
        ]
   }

 ];

这将使对象的结构与Angular documentation here

中使用的示例一致
const crisisCenterRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];
相关问题