首页 文章

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

提问于
浏览 次
4

我正在使用角度5.1.0，我遇到了路由系统的问题，让我解释一下：

在我的app-routing模块中，我有一个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 param .

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

UPDATE

此时我认为问题是由于 data param，但现在我发现这不是问题所在 . 让我展示一下当路由器加载 /error 时呈现的 error.component ：

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 ）

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

javascript angular typescript

1 回答

  • 10

    我已经使用NgZone解决了这个问题，我认为角度的“定时”路由问题涉及角区域中的渲染错误组件，因此，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问题

    回复于

相关问题