Question

我试图在我的Angular 5应用程序中实现一个非常简单的错误处理程序。每当发生错误时，我只希望它显示一个自定义错误页面。我参考this article构建了自定义错误处理程序。

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

@Injectable()
export class CustomErrorHandler extends ErrorHandler {

    constructor(private injector: Injector) {
     super();
    }
    handleError(error) {
      console.log("Custom error handler.");
      const router = this.injector.get(Router);
    router.navigate(["/error"]);
    throw(error);
    }
  }

应用程序确实输入了CustomErrorHandler。但是，它没有完全重定向到旧页面。相反，错误＆＃34;页面＆＃34; （只是说＆＃34;错误有效＆＃34;现在）出现在抛出错误的原始页面上方。地址栏中的URL 从/ ticket更改为/ error，但会显示错误和故障单视图/模板。

我引用了this question并将我的ErrorComponent添加到entryComponents数组中。

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    PageNotFoundComponent
  ],
  entryComponents: [
    ErrorComponent
  ],
  imports: [
    HttpClientModule,
    FlexLayoutModule,
    FormsModule,
    BrowserModule,
    LoadingModule.forRoot({
      animationType: ANIMATION_TYPES.circleSwish,
      backdropBackgroundColour: 'rgba(0,0,0,0.1)',
      backdropBorderRadius: '4px',
      primaryColour: '#ffffff',
      secondaryColour: '#ffffff',
      tertiaryColour: '#ffffff'
    }),
    ReportingModule,
    SharedModule,
    MaterialModule,
    MatNativeDateModule,
    TicketModule,
    NgxResponsiveStackTableModule,
    AppRoutingModule
  ],

  providers: [TicketService, ReportService, UserService,
    httpInterceptorProviders, UploadService, {
      provide: ErrorHandler,
      useClass: CustomErrorHandler
    }],

  bootstrap: [AppComponent]
})
export class AppModule {

  constructor(router: Router) {

  }
}

这并没有解决问题。我用来触发错误的模板（用于测试）

    <h2>Open Tickets</h2>
<div fxLayout="row">
        <mat-form-field>
                <mat-select #sort (change)="sortTickets(sort.value)" placeholder="Sort By.." >
                        <mat-option value="Property">Property</mat-option>
                        <mat-option value="Open">Open Date</mat-option>    
                </mat-select>
        </mat-form-field>
</div>
<div>
        <ngx-loading [show]="isLoading"></ngx-loading>
        <app-ticket-table *ngIf="!isLoading" [tickets]=tickets></app-ticket-table>
</div>

及其相应的TypeScript。

  @Component({
  selector: 'app-ticket',
  templateUrl: './ticket.component.html',
  styleUrls: ['./ticket.component.scss']
})
export class TicketComponent implements OnInit {

  tickets : TicketModel[];
  isLoading :boolean;

  constructor(private ticketService : TicketService) { }

  ngOnInit() {
    this.isLoading = true;
  this.ticketService.getUserTickets().subscribe((res)=> {
    this.tickets = res;
    this.isLoading = false;
  });
  }

我有一个响应Http错误的拦截器。我试图暂时禁用它以防引起问题，但它没有解决问题。

export class LoggingInterceptor implements HttpInterceptor {

constructor(private authService: AuthService) {    }

intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    return next.handle(req)
        .catch((err: HttpErrorResponse) => {             
            console.log(err);
            return _throw(err.message);
        });

};
}

我的应用的路由很简单：

const routes: Routes = [
  {path: "error", component: ErrorComponent},
{  path: '**', component: PageNotFoundComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
exports: [RouterModule]
})
export class AppRoutingModule { }

和TicketModule：

const routes: Routes = [{
  path: "ticket",

  canActivate: [UserGuard],
  children: [
    { path: "new", component: TicketAddComponent },
    { path: ":id", component: TicketDetailComponent },
    { path: "", component: TicketComponent }

  ]
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TicketRoutingModule { }

我只有一个路由器插座（在我的根应用程序组件中）

  <mat-toolbar>    
            <a class="navbar-brand" href="">
                <img src="../assets/logo.png" />
            </a>
            <span class="fill-space"></span>
            <div  fxHide.lt-md=true  *ngIf="authService.isLoggedIn" >
                    <a mat-button routerLink="/">Home</a>
                    <a mat-button routerLink="/ticket">View Tickets</a>
                    <a mat-button routerLink="/ticket/new">New Ticket</a>
                    <a mat-button routerLink="/report">Reports</a>           
            </div>
    <div fxHide.gt-sm=true  *ngIf="authService.isLoggedIn">

                <mat-menu   #appMenu="matMenu">
                        <a mat-button routerLink="/">Home</a>
                        <a mat-button routerLink="/ticket">View Tickets</a>
                        <a mat-button routerLink="/ticket/new">New Ticket</a>
                        <a mat-button routerLink="/report">Reports</a>     
                      </mat-menu>
                      <button mat-icon-button [matMenuTriggerFor]="appMenu">
                            <mat-icon>more_vert</mat-icon>
                          </button>
    </div>

    </mat-toolbar>
<div id="content" class="container  mat-typography ">
<router-outlet></router-outlet>
</div>

任何建议都将不胜感激。感谢。

导航到自定义错误页面 - 原始页面仍然显示

0 个答案: