问题描述
我使用的是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,问题仍然存在.
UPDATEI 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中导航时,无法将子级路由到父级的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!