ile benim uygulamanın tüm sayfaları için global olarak http bağlantısının hata mesajı ile açılır penceresini görüntülemek için istiyorum.Ekran http hataları küresel Açısal 2
Herhangi iyi yolu ona do?
ile benim uygulamanın tüm sayfaları için global olarak http bağlantısının hata mesajı ile açılır penceresini görüntülemek için istiyorum.Ekran http hataları küresel Açısal 2
Herhangi iyi yolu ona do?
Çözüm buldum.
ana fikri: EventEmitter ile köprü hizmetini kullanın.
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 = [];
}
}
Biz main.ts bizim ApiProvider kaydetmeniz gerekir
<div *ngIf="globalErrors.length > 0" class="alert alert-danger fade in">
<a (click)="clearErrors()" class="close" aria-label="close">×</a>
error...
</div>
app.component.html Bağımlılık enjeksiyonundan tek bir örneğe sahip olmak.
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));
Bu özel bileşen dahil ederek pop-up pencerede hataların bir özel bileşen ve gösteri listesi oluşturabilirsiniz. Örneğin
<list-errors [errors]="errors"></list-errors>
bir değer ayarlamak böyle
export class Errors {
errors: {[key:string]: string} = {};
}
gibi bir hata modeli oluşturmak hataların listesini görüntülemek isteyen pop-up pencerede bu
@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; }
}
kullanın yapabilirsiniz ve hata nesnesinin liste hata bileşeni
errors: Errors = //assign your errors to this variable
Bu hata nesnesi geçmesi 210
hataları: Hatalar = // Eğer nesne hataları bazı sahte hatayı atama örneği gösterebilir, bu değişken Hi hatalarınızı atamak? Bununla ilgili hatalar yapmaya devam ediyorum. – Davvit
@Davvit bu snippet'i hatalarını kullanır: Hatalar = {'error_code': 'error string'}; –
Hala bu şekilde mi kullanıyorsunuz? Diğer yerler manuel olarak abone olmamanızı önerir (http://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter) ancak sizin için herhangi bir alternatif bulamadım. –