在Angular中导航时,将子节点路由到父节点不起作用

Question

我正在使用angular 5.1.0,我遇到了路由系统的问题,让我解释一下:

在我的app-routing模块中,我有一个/api延迟加载另一个模块的url ,在那个延迟加载的模块中,我有下一个路由实现:

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执行时,我看到我的通用错误页面使用在最后一个路由中加载的痕迹导出:/apiby dataparam.

是否有任何方法可以将路由器设置为在加载时重置数据？或者我做错了什么？

---

UPDATE

在这一点上,我认为问题是由于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)

---

更新 我升级到角度5.2.9,问题仍然存在.

Answer 1

我已经使用NgZone解决了这个问题,我认为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 });
    });
  }
}

这里有一个github问题与我的问题有关