答えて
解決策が見つかりました。
主な考え方:ブリッジサービスとEventEmitterを使用してください。私たちは、main.tsで私たちのApiProviderを登録する必要があります
api.provider.ts
import { Injectable, Output, EventEmitter } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
@Injectable()
export class ApiProvider {
private _host: string;
@Output() errorHandled$ = new EventEmitter();
constructor(private _http: Http) {
this._host = "http://localhost:5000";
}
private errorHandler(response: Response): any {
if (response.status == 0)
{
this.errorHandled$.emit({
value: "ERR_CONNECTION_REFUSED"
});
}
return null;
}
get(path: string): Promise<any> {
var headers = new Headers();
return this._http.get(this._host + path, { headers: headers })
.toPromise()
.then(response => {
return response.json();
})
.catch((response: Response) => this.errorHandler(response));
}
post(path: string, body: string): Promise<any> {
var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
return this._http.post(this._host + path, body, { headers: headers })
.toPromise()
.then((response: Response) => {
return response.json();
})
.catch((response: Response) => this.errorHandler(response));
}
}
app.component.ts
import 'rxjs/Rx';
import { Component } from '@angular/core';
import { ApiProvider } from './providers/api.provider';
@Component({
selector: 'mii-app',
templateUrl: './app.component.html'
})
export class AppComponent {
globalErrors: string[];
constructor(private _api: ApiProvider) {
this.globalErrors = [];
_api.errorHandled$.subscribe(value => { console.log('subscribe'); this.globalErrors.push('error connection.')});
}
clearErrors(): void
{
this.globalErrors = [];
}
}
app.component.html
<div *ngIf="globalErrors.length > 0" class="alert alert-danger fade in">
<a (click)="clearErrors()" class="close" aria-label="close">×</a>
error...
</div>
依存性注入から単一のインスタンスを持つこと。
main.ts
/// <reference path="../../typings/globals/core-js/index.d.ts" />
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from './app.component';
import { ApiProvider } from './providers/api.provider';
bootstrap(AppComponent, [
HTTP_PROVIDERS,
ApiProvider
])
.catch(err => console.error(err));
あなたは、このカスタムコンポーネントを含むことにより、ポップアップウィンドウにエラーのカスタムコンポーネントやショーリストを作成することができます。たとえば、あなたは
<list-errors [errors]="errors"></list-errors>
に値を設定し、そのような
export class Errors {
errors: {[key:string]: string} = {};
}
などのエラーモデルを作成するには、エラーのリストを表示するポップアップウィンドウにこの
@Component({
selector: 'list-errors',
template: `<ul class="error-messages" *ngIf="errorList">
<li *ngFor="let error of errorList">
{{ error }}
</li> </ul>`
})
export class ListErrorsComponent {
formattedErrors: Array<string> = [];
@Input()
set errors(errorList: Errors) {
this.formattedErrors = [];
if (errorList.errors) {
for (let field in errorList.errors) {
this.formattedErrors.push(`${field} ${errorList.errors[field]}`);
}
}
};
get errorList() { return this.formattedErrors; }
}
使用これを行うことができますこのエラーオブジェクトをリストエラーコンポーネントに渡す
errors: Errors = //assign your errors to this variable
errors:Errors = //この変数にエラーを割り当てます。 こんにちは、エラーオブジェクトにいくつかの偽のエラーを割り当てるサンプルを表示できますか?私はそれについて間違いを続けている。 – Davvit
@Davvitはこのスニペットを使用します エラー:エラー= {'error_code': 'エラー文字列'}; –
- 1. エラーAngular 2のhttpモジュール
- 2. Devexpress Angular 2でグローバル化
- 3. Ionic 2/Angular 2グローバル変数
- 4. Angular 2 JSONオブジェクトを表示
- 5. HTTP Request Angular 2
- 6. Http get Angular 2
- 7. angular 2 http withCredentials
- 8. Angular 2 httpサービス
- 9. Angular ng-repeatエラー表示
- 10. Angular 2 ObservablesとHttpで 'Undefined'
- 11. Angular 2 Http with jsonp
- 12. Angular 2チュートリアルでHTTPを理解する
- 13. $ http get from angular、djangoのデータを表示できません
- 14. Angular HTTPの不正なリクエストに関するエラーメッセージを表示
- 15. OpenPGPをIonic 2 Angular 2とTypeScriptで表示
- 16. インジェクションとグローバルな静的クラス(Angular 2)
- 17. Angular CLIでグローバル化
- 18. Angular 2アプリケーション内でjQueryをグローバルに使用する
- 19. Angular FormGroupエラーが表示されない
- 20. 角2:HTTP POSTエラー
- 21. Angular 2 http .Net Core Web APIのApi 500のエラー
- 22. Error:XHRエラー(404 Not Found)読み込みhttp:// localhost:3622/app.js(...)+ angular 2
- 23. Angular 2コンポーネントでグローバル変数にアクセスする方法
- 24. グローバル値Ionic Angular
- 25. angular 2 final - Httpのグローバルヘッダーを追加
- 26. Angular 2 HTTPサービスを設定する
- 27. Angular 2 Http Firefoxで常にXMLを返すには
- 28. Angular 2からAngular 2にアップグレードした後のエラー
- 29. 角度2エラーのHttp
- 30. 翻訳された動的ページタイトルをルータイベントのAngular 2で表示
まだこの方法で使用していますか?他の場所では、手動で購読するべきではないことが示唆されています(http://stackoverflow.com/questions/36076700/what-is-the-properuse-of-an-eventemitter)。 –