javascript - 在 Angular 中导航时，将 child 路由到 parent 不起作用

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执行后，我看到我的一般错误页面呈现了最后一条 route 加载的面包屑:/api通过 data参数。

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

---

更新

此时我认为问题是由于data引起的参数，但现在我发现这不是问题所在。让我展示一下我的 error.component当 Router 加载时呈现 /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 区域之外的渲染错误组件，因此，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 问题