在 Angular 中导航时，将子级路由到父级不起作用

Question

我使用的是 Angular 5.1.0，我的路由系统有问题，让我解释一下：

在我的应用程序路由模块中，我有一个 url /api 可以延迟加载另一个模块，在那个延迟加载的模块中，我有下一个路由实现：

api-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: ApisComponent,
    data: {
      breadcrumbs: 'APIs',
    },
    children: [
      {
        path: '',
        component: ApiListComponent,
      },
      {
        path: ':id',
        component: ApiDetailComponent,
        resolve: {
          api: ApiResolverService
        },
        data: {
          breadcrumbs: '{{ api.title }}',
        },
      },
    ],
  },
];

这里重要的是路由器接收到的data 参数。

在我的应用程序中，我有一个通用错误行为，当抛出异常时，我有一个 errorHandler 类，它可以捕获错误并重定向到另一个 url：/error，这是处理程序代码：

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

  constructor(private injector: Injector) { }

  handleError(error: any): void {
    const routerService = this.injector.get(Router);
    routerService.navigateByUrl('/error', { skipLocationChange: true });
  }
}

问题是，当在/api 中引发异常并执行handleError 时，我看到我的通用错误页面呈现在最后一条路由中加载的面包屑：/api by data 参数。

有没有办法让路由器在加载时重置数据？还是我做错了什么？

---

更新

此时我认为问题出在data 参数上，但现在我发现这不是问题所在。让我展示我的error.component，它是在路由器加载/error 时呈现的：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-error',
  templateUrl: './error.component.html',
  styleUrls: ['./error.component.scss']
})
export class ErrorComponent implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {
    console.log('snapshot trace');
    console.log(this.route.snapshot);
  }
}

我在 onInit 组件方法中包含了ActivatedRoute 快照的跟踪以查看它有什么，问题是当errorHandler 从/api 导航到/error 时跟踪没有显示。

但是如果我直接加载/error，则会显示跟踪，因此无论出于何种原因，错误组件在第一种情况下都没有正确实例化（从/api 导航到/error）

---

更新 我已经升级到 Angular 5.2.9，但问题仍然存在。

Answer 1

我已经使用 NgZone 解决了这个问题，我认为 angular 的“时序”路由问题涉及到 angular zone 之外的渲染错误组件，所以，AppErrorHandler 类看起来像这样：

import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

  constructor(private injector: Injector) { }

  handleError(error: any): void {
    const routerService = this.injector.get(Router);
    const ngZone = this.injector.get(NgZone);
    ngZone.run(() => {
      routerService.navigate(['/error'], { skipLocationChange: true });
    });
  }
}

Here 与我的问题相关的 github 问题