如何在 Angular 2 中跟踪路由？

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 { }

当我输入 URL 地址时：

http://localhost:4200/calendar

我被重定向到主页。

如何在 Angular 2 中跟踪路由？

Answer 1

您可以传入第二个参数带有选项：

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

Angular 然后将根据文档将所有事件记录到浏览器的控制台：

enableTracing?: 布尔值
为真时，将所有内部导航事件记录到控制台。用于调试。

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' 存在问题。

Answer 4

虽然我迟到了回答这个问题。但它可能对 Angular 的新手有用。

有两种方法可以跟踪角度路线变化.

1。路由器模块（启用跟踪）

您可以将

enableTracing

设置为

RouterModule

，这将记录您所有的路线更改事件。

RouterModule.forRoot(routes, { 
  enableTracing: true,    /* <-- Set this to true */
}),

2。订阅

Router.events

如果您不想跟踪所有路由器更改事件，那么您可以订阅

Router.events

。您可以使用它来过滤特定的路线更改事件。

constructor(
  private router: Router,
  /* Other dependencies */
) {

  this.router.events
    .pipe(
      // You can also use traditional if else in the subscribe 
      filter(event => event instanceof NavigationStart)
    )
    .subscribe(event => {
      console.group(`Router event: ${event.constructor.name}`);
      console.log(event);
      console.groupEnd();
    });
}

Answer 5

如果您正在使用独立组件并在

main.ts

文件中引导您的路由，则将此配置作为对函数

withDebugTracing

:

的调用传递

// main.ts

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(
      MY_APP_ROUTES, // first argument is your routes array
--->  withDebugTracing(), // second argument and beyond are router features to be enabled
    ),
  ],
}).catch(console.error);

来源：https://angular.io/guide/standalone-components#configuring-dependency-injection