在Angular中导航时，无法将子级路由到父级 [英] Routing child to parent is not working when navigates in Angular

问题描述

我使用的是angular 5.1.0，并且路由系统出现问题，请让我解释一下:

I'm using angular 5.1.0, and I have an issue with the routing system, let me explain:

在我的应用程序路由模块中，我有一个网址/api，它可以延迟加载另一个模块，在该延迟加载的模块中，我具有下一个路由实现:

In my app-routing module I have an url /api that lazy loads another module, in that lazy loaded module I have the next routing implementation:

api-routing.module.ts

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参数.

The important thing here is the data param that the Router receives.

在我的应用中，我有一个通用的错误行为，当引发异常时，我有一个errorHandler类来捕获错误并重定向到另一个URL:/error，这是处理程序代码:

In my app I have a generic error behaviour that when an exception is throwed I have a errorHandler class that catch the error and redirects to another url: /error, this is the handler code:

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通过data参数.

The problem is, when an exception is throwed inside /api and handleError is executed, I see my generic error page rendered with the breadcrumb loaded in the last route: /api by data param.

有什么方法可以将路由器设置为在加载时重置数据吗?还是我做错了什么?

Is there any way to set the Router to reset data when is loaded? or maybe I'm doing something wrong?

更新

在这一点上，我认为问题是由于data参数引起的，但是现在我知道这不是问题所在.让我展示我的error.component，它在路由器加载/error时呈现:

At this point I thought the problem was due to data param, but now I see that it's not the problem. Let me show my error.component that is rendered when Router loads /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时，该踪迹没有显示.

I have included in the onInit component method, a trace of ActivatedRoute snapshot to see what it has, and the thing is that trace is not showing when errorHandler navigates from /api to /error.

但是，如果我直接加载/error，则会显示跟踪，因此无论出于何种原因，在第一种情况下(从/api导航到/error)，错误分量均无法正确实例化

But if I load directly /error the trace is showed, so for any reason the error component is not instanciated correctly in the first scenario (navigate from /api to /error)

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

UPDATE I have upgraded to angular 5.2.9 and the problem still happens.

推荐答案

我已经使用NgZone解决了该问题，我认为Angle的时序"路由问题涉及到角度区域之外的呈现错误分量，因此，AppErrorHandler类看起来像这样:

I have solved the problem using NgZone, I think the "timing" routing problem that angular has involve the render error component out of angular zone, so, the AppErrorHandler class looks like this:

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问题

Here a github issue related to my problem

这篇关于在Angular中导航时，无法将子级路由到父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！