Question

我在angular2代码中遇到了一些意想不到的行为。我正在使用角度路由器插座在父容器中的视图之间切换。我已按以下方式定义路线： -

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'的实现。

从功能的角度来看，一切都按照应有的方式运作。单击按钮切换视图就可以了。但是，我观察到的一点是，在我尝试从'供应商'路线切换到'subject /：subject_id'路线的特定情况下，网址会非常短暂地改变到正确的路线并相应地改变视图，但是片刻之后，它会切换回“供应商”路线并在路由器插座中留下正确的视图（这意味着'subject /：subject_id'的组件会启动并正常运行，但是网址会切换回'供应商的路径。

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

任何人都有任何想法/解释，我可以在哪里消除这种网址还原行为？

更新： GIF

这是一系列行动：

root route - localhost：4200 / - ＆gt;本地主机：4200 /仪表板
切换到供应商路线 - localhost：4200 /供应商
切换到主题路由，其中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路由器行为 - 网址更改然后恢复为

1 个答案: