私の最近のAngular 2プロジェクトでは、あらゆる種類のエラーを表示するコンポーネントを追加しようとしています。 Chromeデベロッパーコンソールでエラーを操作して表示することはできますが、実際に出力を生成するには失敗します。角度2のコンポーネントビューにエラーを表示するにはどうすればよいですか?
これを達成するために、角型コアのErrorHandler
を拡張するサービスクラスを追加しました。それはあなたが購読することができる新しいメッセージを得るために、件名を含んでいます。
import { Injectable, ErrorHandler } from '@angular/core';
import { Subject } from 'rxjs/Rx';
export interface IMiaErrorMessage {
exception: string,
stackTrace?: any,
reason?: string
}
@Injectable()
export class MiaErrorHandlingService extends ErrorHandler {
public errors: Subject<IMiaErrorMessage> = new Subject<IMiaErrorMessage>();
handleError(exception: any): void {
console.groupCollapsed('Fehler');
console.error(exception);
console.groupEnd();
let error: IMiaErrorMessage = {
"exception": ""+exception
}
console.log('error', error);
this.errors.next(error);
}
}
その後、実際にエラーメッセージを表示するコンポーネントを追加しました。 subscribe
-callがあり、新しいエラーメッセージであるerrors
-Arrayが追加されています。 throwError
とaddError
の2つの機能はテスト用です。私が単にaddError
関数を使って例外テキストを追加すると、すべてうまく動作しますが、実際にはthrowError
を使用してエラーが発生します。両方のコンソール出力は同じです。
import { Component, Input } from '@angular/core';
import { MiaErrorHandlingService, IMiaErrorMessage } from './../services/mia-error-handling.service';
import { Subject } from 'rxjs/Rx';
@Component({
selector: 'mia-errors',
templateUrl: 'errors.component.html',
styleUrls: ['errors.component.scss'],
providers: [MiaErrorHandlingService]
})
export class ErrorsComponent {
title = 'Es ist ein Fehler aufgetreten';
private errors: Array<IMiaErrorMessage> = [];
constructor(private miaErrorHandlingService: MiaErrorHandlingService) {
// Observer of the connection status
this.miaErrorHandlingService.errors.subscribe(
value => this.errors.push(value),
error => console.info('ERROR', error),
() => console.info('COMPLETE')
);
}
private throwError() {
console.log('throwError');
throw Error('Hello again');
}
private addError() {
console.log('addError');
this.miaErrorHandlingService.handleError('Foo');
}
}
コンソール出力は、ここでは完全を期すために
errors.component.ts:35 addError
mia-error-handling.service.ts:18 Fehler
mia-error-handling.service.ts:19 FooMiaErrorHandlingService.handleError @ mia-error-handling.service.ts:19 ErrorsComponent.addError @ errors.component.ts:36_View_ErrorsComponent0._handle_click_13_0 @ ErrorsComponent.ngfactory.js:164(anonymous function) @ view.js:404(anonymous function) @ dom_renderer.js:249(anonymous function) @ dom_events.js:26ZoneDelegate.invoke @ zone.js:203onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:202Zone.runGuarded @ zone.js:110NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72NgZone.runGuarded @ ng_zone.js:236outsideHandler @ dom_events.js:26ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136ZoneTask.invoke @ zone.js:304
mia-error-handling.service.ts:24 error Objectexception: "Foo"__proto__: Object
errors.component.ts:30 throwError
mia-error-handling.service.ts:18 Fehler
mia-error-handling.service.ts:19 ViewWrappedError {_nativeError: Error: Error in ./ErrorsComponent class ErrorsComponent - inline template:10:8 caused by: Hello agai…, originalError: Error: Hello again
at ErrorsComponent.throwError (http://localhost:4200/main.bundle.js:67888:15)…, context: DebugContext}MiaErrorHandlingService.handleError @ mia-error-handling.service.ts:19next @ application_ref.js:273schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72NgZone.runGuarded @ ng_zone.js:236outsideHandler @ dom_events.js:26ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136ZoneTask.invoke @ zone.js:304
mia-error-handling.service.ts:24 error Objectexception: "Error: Error in ./ErrorsComponent class ErrorsComponent - inline template:10:8 caused by: Hello again"__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: __proto__()set __proto__: __proto__()
である私の見解は、私は私が得ることができるすべての入力のために感謝してい
<dl *ngFor="let error of errors">
<dt>
<app-icon>warning</app-icon>
</dt>
<dd>{{error.exception}}</dd>
</dl>
<button (click)="throwError()">Do something wrong!</button>
<button (click)="addError()">addError</button>
です。 https://coryrylan.com/blog/angular-2-form-builder-and-validation-management
私は私のアプリで彼の方法を使用しています:ここで
import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ValidationService } from '../services/validation.service';
@Component({
selector: 'kg-errorMessages',
template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ErrorMessagesComponent {
@Input() control: FormControl;
@Input() name: string;
constructor() { }
get errorMessage() {
for (let propertyName in this.control.errors) {
if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
}
}
return null;
}
}
:ここ
は誤差成分である