エラーがCustomErrorHandlerを経由したときにカスタムメッセージを表示しない

Question

http errorが来たらいつでもカスタムポップアップを作成してカスタムメッセージを表示したいと思います。だから、これは現在のerror statusを保持するクラスです

@Injectable() 
export class ErrorHandlerService { 
    private status: any; 


    get getStatus(){ 
    return this.status; 
    } 

    set setStatus(status : any){ 
    this.status = status; 
    } 
} 

： - status

@Injectable() 
export class CustomErrorHandler extends ErrorHandler { 

    constructor(private errorHandlerService: ErrorHandlerService){ 
    super(false); 
    } 
    public handleError(error: any): void { 
    super.handleError(error); 
    if (error.status == 500){ 
     this.errorHandlerService.setStatus = error.status; 
     alert('error 500'); 
    } 
    } 
} 

さらに、私は一つだけpropetyを持ってserviceを作成しました：これを行うには、私は次のようになりますカスタムevent handlerを作成しました。メソッドgetStatusによって、メッセージを表示する必要があるかどうかを確認します。もちろん、私はapp.moduleにprovidersセクションの必要フィールドを追加しました。 app.component.htmlで

- 私はエラーが表示されます

<error-handler></error-handler> 

を追加したcomponent私のメイン。

したがって、最も良い方法で実装する方法の主な質問error-handler component？まず、コンストラクタに対してinjectingと考えましたが、statusは決して変更されないことを認識しています。だから私に示唆したり、適切にそれをする方法を教えてください。今、私はちょうどクラスに私のサービスを注入するための

：

@Component({ 
    selector: 'error-handler', 
    templateUrl: './error-handler.component.html', 
    styleUrls: ['./error-handler.component.css'] 
}) 
export class ErrorHandlerComponent implements OnInit { 
    showErrorMessage = false; 

    constructor(private errorHandlerService: ErrorHandlerService) {} 

    ngOnInit() {} 

} 

.html 
<h1 *ngIf="showErrorMessage ">Error appears!</h1> 

Answer 1

app.component.html

このファイルに<error-handler></error-handler>を追加することにより、いつでも利用でき、その世界的に。

<ng-container *ngIf="showErrorMessage"> 
 
    <h1>Error handler container</h1> 
 
    <error-handler></error-handler> 
 
</ng-container> 
 
<router-outlet></router-outlet>

app.component.ts

constructor(private errorHandlerService: ErrorHandlerService, private cd: ChangeDetectorRef) {} 
 

 
showErrorMessage = false; 
 
ngOnInit() { 
 
    this.errorHandlerService.getStatus().subscribe((err: any) => { 
 
     if (err != "200") { 
 
     showErrorMessage = true; 
 
     } else { 
 
     showErrorMessage = false; 
 
     } 
 
     this.cd.markForCheck(); 
 
    }); 
 
    }

ErrorHandlerService

@Injectable() 
 
export class ErrorHandlerService { 
 
    private status: Subject<any> = new Subject(); 
 

 
    getStatus(): Observable<any>{ 
 
    return this.status.asObservable(); 
 
    } 
 

 
    setStatus(status : any){ 
 
    this.status.next(status); 
 
    } 
 
}

私はサービスを少し変更しました。

The status can now store the last value as long as the service is in used or otherwise destroyed.

getStatus() method now returns a Observable which means you can subscribe to it and Angular will track for changes

return this.http.get("url") 
 
     .map((res) => res.json() as Class) 
 
     .catch((err: Response) => Observable.throw(youmethod(err)));