Question

在我的Angular应用程序中，我有2条路线，如下所示。

1. http://localhost:4200/lectures 
2. http://localhost:4200/lectures/{id}

第一条路线显示演讲列表，第二条路线显示单个演讲组成部分。当我尝试在第二条路由上执行浏览器重新加载时，它会重定向到第一条路由，或者重定向到根路由，因为我只有2条路由，并且根/空路由默认为第一条路由。这些路由/组件没有父子关系，并且彼此独立。

这两个路由都有一些解析器，可以在呈现组件之前从服务中获取所需的数据。

如何阻止应用程序重定向到其先前的组件，或者我猜它是浏览器重新加载时的根组件？

我也不能直接去第二条路线。

我在两条路由上都使用了'microsoft-adal-angular6'AuthenticationGuard。

我已经阅读了此博客并已经尝试过，但是没有用。 https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LectureDetailsComponent } from './lecture-details/lecture-details.component';
import { LectureListComponent } from './lecture-list/lecture-list.component';
import { LectureDetailResolver } from './_resolvers/lecture-detail.resolver';
import { LectureListResolver } from './_resolvers/lecture-list.resolver';
import { AppComponent } from './app.component';
import { AuthenticationGuard } from 'microsoft-adal-angular6';

const routes: Routes = [
  { path: '', redirectTo: '/lectures', pathMatch: 'full', canActivate: [AuthenticationGuard] },
  { path: 'lectures', component: LectureListComponent, resolve: { lectures: LectureListResolver }, canActivate: [AuthenticationGuard] },
  { path: 'lectures/:id', component: LectureDetailsComponent, resolve: { lecture: LectureDetailResolver }, canActivate: [AuthenticationGuard] },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthenticationGuard]
})
export class AppRoutingModule {

}

期望页面在相同的路由/组件上刷新，但实际结果是应用程序被重定向到上一个/根组件

Answer 1

您可能只需要对路径重新排序，以使空路径位于文档（https://angular.io/guide/router#configuration）的两个组件路径之后：

路由在配置中的顺序很重要，这是设计使然。路由器在匹配路由时会使用“先赢”策略，因此应将更具体的路由放在不那么具体的路由之上。在上面的配置中，首先列出具有静态路径的路由，然后是与默认路由匹配的空路径路由。通配符路由排在最后，因为它匹配每个URL，并且只有在没有其他路由最先匹配时才应选择通配符路由。

您还应该在末尾添加一个通配符，这样您的路由配置将看起来像这样（通配符路由不需要pathMatch）。

const routes: Routes = [
  {
    path: 'lectures',
    component: LectureListComponent,
    resolve: { lectures: LectureListResolver },
    canActivate: [AuthenticationGuard]
  },
  {
    path: 'lectures/:id',
    component: LectureDetailsComponent,
    resolve: { lecture: LectureDetailResolver },
    canActivate: [AuthenticationGuard]
  },
  {
    path: '',
    redirectTo: '/lectures',
    pathMatch: 'full',
    canActivate: [AuthenticationGuard]
  },
  {
    path: '**',
    redirectTo: '/lectures',
    canActivate: [AuthenticationGuard]
  }
];

现在空路由是多余的，因此您可以将其删除。

const routes: Routes = [
  {
    path: 'lectures',
    component: LectureListComponent,
    resolve: { lectures: LectureListResolver },
    canActivate: [AuthenticationGuard]
  },
  {
    path: 'lectures/:id',
    component: LectureDetailsComponent,
    resolve: { lecture: LectureDetailResolver },
    canActivate: [AuthenticationGuard]
  },
  {
    path: '**',
    redirectTo: '/lectures',
    canActivate: [AuthenticationGuard]
  }
];

在浏览器重新加载时，角度应用程序将重定向到先前的组件

1 个答案: