angular2 路由器行为 - url 发生变化，然后恢复到之前的状态

Question

我在 angular2 代码中遇到一些意外行为。我正在使用 angular 路由器出口在父容器中的视图之间切换。我按以下方式定义了路线：-

export const routes: Routes = [
{
  path: '',
  redirectTo: '/dashboard',
  pathMatch: 'full'
},
{
  path: 'dashboard',
  component: DashboardComponent
},
{
  path: 'suppliers',
  component: SuppliersComponent
},
{
  path: 'suppliers/:supplier_id',
  component: SuppliersComponent
},
{
  path: 'subjects',
  component: SubjectsComponent,
  children: [
  {
    path: 'information',
    component: SubjectsInfoComponent
  },
  {
    path: 'measurements',
    component: SubjectsMeasurementsComponent
  },
  {
    path: 'activity_log',
    component: SubjectsActivityComponent
  },
  {
    path: 'components',
    component: SubjectsComponentsComponent
  }
]
},
{
  path: 'subjects/:subject_id',
  component: SubjectsComponent
}
];

我的导航栏上还有两个按钮，用于将视图切换到“/suppliers”路径或“/subjects”路径。相应的组件视图具有从组件结构中打开“/subjects/:subject_id”和“/suppliers/:supplier_id”的实现。

从功能的角度来看，一切正常。单击按钮切换视图效果很好。但是，我观察到的是，在我尝试从 'suppliers' 路线切换到 'subjects/:subject_id' 路线的特定情况下，url 非常短暂地更改为正确的路线并更改相应的视图，但在片刻之后它切换回 'suppliers' 路由并在路由器出口中留下正确的视图（这意味着 'subjects/:subject_id' 的组件启动并正常运行，但是url 切换回 'suppliers' 路径）。

我正在尝试了解这背后的根本原因。在我的实现中，没有任何内容会自动触发返回供应商的路由更改，即使是这种情况，整个视图也应该更改，而不仅仅是 URL。

有人 ideas/explanations 知道我在哪里可以消除这种 url 恢复行为吗？

更新：动图

这是操作顺序：

根路由 - localhost:4200/ -> localhost:4200/dashboard
切换到供应商路线 - localhost:4200/供应商
switch to subjects route with id - url 暂时变为 localhost:4200/subjects/5951530e9927b0521b17e294 然后自动恢复到 localhost:4200/suppliers。

Answer 1

您可以尝试打开 enableTracing 以查看是否可以提供有关路由正在执行的操作的更多线索。像这样：

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: 'welcome', component: WelcomeComponent },
            {
                path: 'products',
                canActivate: [ AuthGuard ],
                data: { preload: true },
                loadChildren: 'app/products/product.module#ProductModule'
            },
            { path: '', redirectTo: 'welcome', pathMatch: 'full' },
            { path: '**', component: PageNotFoundComponent }
        ], { enableTracing: true })   //<- Add this here
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }

angular2 路由器行为 - url 发生变化，然后恢复到之前的状态

angular2 router behavior - url changes and then reverts back to what it was before

typescript

angular2-routing

angular