Question

我已经实现了我的自定义错误处理程序，并且我想重新定向到我的自定义错误页面，它只是说“抱歉，发生错误......”。

我在app-routing.module.ts文件下声明了一条路线，如下所示：

import { NgModule } from '@angular/core';
import { PreloadAllModules, Routes, RouterModule } from '@angular/router';

import { NoContentComponent } from './no-content/no-content.component'
import { CustomErrorComponent } from './customerror/customerror.component';

const routes: Routes = [
    { path: '',   redirectTo: '/home', pathMatch: 'full' },
    { path: 'resources',  loadChildren: 'app/educational-materials/educational-materials.module#EducationalMaterialsModule' },
    { path: 'administrative',  loadChildren: 'app/dsc/dsc.module#DSCModule' },
    { path: 'ask-a-question',  loadChildren: 'app/aaq/aaq.module#AAQModule' },
    { path: '**', pathMatch: 'full', component: NoContentComponent },
    { path: 'error', component: CustomErrorComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
    exports: [RouterModule],
    providers: []
})

export class AppRoutingModule { }

在我的全局异常处理程序中，我实现了这个：

import { Router } from '@angular/router';
import { ErrorHandler, Injectable, Injector } from '@angular/core';

@Injectable()

export class GlobalExceptionErrorHandler implements ErrorHandler {
    private router: Router;

    constructor(injector: Injector) {
        setTimeout(() => this.router = injector.get(Router));
    }

    handleError(error) {
        console.log('globalExceptionHandler | handleError...');

        this.router.navigate(['/error']);
    }
}

在此文件中，当我将正斜杠放在error前面时，它会重定向到/ error url，但会显示缺少404页面。（显然它没有进入我的CustomErrorComponent页面。）

如果我从this.router.navigate(['error'])删除前斜杠，那么它就没有了。

如何让我调用我在app-routing.module.ts文件中定义的CustomErrorComponent？

编辑：

这是CustomErrorComponent：

import { OnInit } from '@angular/core';

export class CustomErrorComponent implements OnInit {
    constructor() { }

    ngOnInit() {
    }
}

该页面的html：

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h3>Sorry, an error occurred processing your request. The error has been logged.</h3>
        </div>
    </div>
</div>

Edit2：是否可能未在正确的位置配置路由？我认为路线需要“在根”定义，但它的行为就像它不存在（因此不会重新定向）。

编辑3：当我在评论中提到它击中我的handleError函数20次时，我没有吐出错误......好吧，我把它打开了查看现在显示的内容（当我的this.router.navigate(['/error'])包含正斜杠时会发生这种情况）：

找不到CustomErrorComponent的组件工厂。你有没有添加它 @ NgModule.entryComponents

接下来，我将其添加到我的CustomErrorComponent文件中：

import { OnInit, Component } from '@angular/core';

@Component({
    entryComponents: [CustomErrorComponent]
})

export class CustomErrorComponent implements OnInit {
    constructor() { }

    ngOnInit() {
        console.log('customErrorComponent | ngOnInit...');
    }
}

现在我只是加载应用程序：

组件CustomErrorComponent不是任何NgModule或模块尚未导入模块

我尝试添加CustomErrorComponent的每个地方都失败了。我应该在哪里注册我的组件？

Answer 1

主要问题是来自routes的{{1}} var在app-routing.module.ts之前有**的条目，路由器将始终转到error }。

将条目**移至**内的最后一个位置将使routes条目可以访问。

我们还发现，在更新后，error的{{1}}装饰器已被移除。

让我们再次回滚并使用以下代码保留@Component({})文件：

CustomErrorComponent

另外，我们必须将CustomErrorComponent添加到主模块的import { OnInit, Component } from '@angular/core'; @Component({ selector: "customErrorComponent", templateUrl: './customerror.component.html' }) export class CustomErrorComponent implements OnInit { constructor() { } ngOnInit() { console.log('customErrorComponent | ngOnInit...'); } }。

只需将CustomErrorComponent添加到主模块。

完成了这项工作，未来的读者可以查看问题的聊天主题以获取更多信息。

Angular2重定向到自定义错误页面

1 个答案: