Question

我的组件包含路由设置的分隔文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { Route } from '../core/route.service';
import { extract } from '../core/i18n.service';
import {CalendarThematicPlanComponent} from './calendar-thematic-plan.component';

const routes: Routes = Route.withShell([
  { path: 'calendar', component: CalendarThematicPlanComponent }
]);

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})

export class CalendarThematicPlanRoutingModule { }

当我输入网址时：http://localhost:4200/calendar我被重定向到主页。

如何在Angular 2中跟踪路由？

Answer 1

您可以使用a second argument传递options：

imports: [
    RouterModule.forRoot(
      routes,
      { enableTracing: true } // <-- debugging purposes only
    )
]

Answer 2

正如最被接受的答案中的注释所建议的，此enableTracing在forChild方法中不起作用。一种简单的解决方法是订阅AppModule中的所有路由事件，如下所示：

export class AppModule {

  constructor(
    private readonly router: Router,
  ) {
    router.events
      .subscribe(console.log)
  }

}

Answer 3

除了devqons出色的答案之外：如果暂时不对通配符路由添加注释，调试路由定义将变得更加容易。通配符路由在生产中很方便显示，例如NotFound组件，但调试时很麻烦。

例如：

const routes: Routes = [
    ... (your route definions)

    // If you have a catch-all route defined, outcomment is like below
    // {
    //     path: '**',
    //     redirectTo: '/error/not-found',
    // },
];

注释掉 catch-all 路由后，路由器将不会吞噬您的错误，并在浏览器控制台中准确显示无法与您的定义匹配的路由。

例如，当显示以下错误时：

core.js:4002 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'projects/123'
Error: Cannot match any routes. URL Segment: 'projects/123'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2459)

您立即知道在路由定义中匹配'projects / 123'会出现问题。

如何在Angular 2中跟踪路由？

3 个答案: