我使用的是 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,但问题仍然存在。
最佳答案
我已经使用 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 问题
关于javascript - 在 Angular 中导航时,将 child 路由到 parent 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48325743/