Как поймать ошибку загрузки шаблонаUrl

Question

Предполагая, что запрос шаблона компонента не может быть доставлен (код состояния 400 и т. Д.), Есть ли способ уловить ошибку, чтобы предпринять действие (перенаправление и т. д.)

Спасибо.

Answer 1

В настоящее время я не знаю, как сделать улов в templateUrl.

Что мы можем сделать, как обходное решение, делает запрос head, чтобы проверить, существует ли файл.

Таким образом, ваш компонент будет выглядеть примерно так:

import {Component, View} from 'angular2/angular2'; 

let hasTemplate = function(template: string) { 
    var http = new XMLHttpRequest(); 
    http.open('HEAD', template, false); 
    http.send(); 
    return (http.status===200) ? template : 'error.html';  
} 

@Component({ 
    selector: 'your-component' 
}) 
@View({ 
    templateUrl: hasTemplate('your-template.html') 
}) 
export class YourComponent { 
    constructor() { 
    } 
} 

Я знаю, что это не является оптимальным решением. Но пока я думаю, что это простой способ обхода, который позволит вам сделать резервную копию, если файл шаблона отсутствует.

Answer 2

AFAIK в настоящее время (бета.2) нет такой механизм.

Вы можете проверить source code метода normalizeTemplate, который извлекает шаблон, я не думаю, что есть способ подключить некоторую логику, если произошла ошибка.

Answer 3

Используя новый резольвер angular2, вы можете предварительно извлечь данные перед загрузкой шаблона. Я полагаю, вы можете использовать тот же механизм для предварительной выборки шаблона, даже если вы просто выбросите его. В блоке catch вы можете перенаправить, если есть какие-то проблемы с запросом.

Существует хорошая информация и хороший пример в https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard, который я привел ниже, если что-то случится со ссылкой.

import { Injectable }    from '@angular/core'; 
import { Router, Resolve, 
     ActivatedRouteSnapshot } from '@angular/router'; 
import { Observable }    from 'rxjs/Observable'; 
import { Crisis, CrisisService } from './crisis.service'; 
@Injectable() 
export class CrisisDetailResolve implements Resolve<Crisis> { 
    constructor(private cs: CrisisService, private router: Router) {} 
    resolve(route: ActivatedRouteSnapshot): Observable<any> | Promise<any> | any { 
    let id = +route.params['id']; 
    return this.cs.getCrisis(id).then(crisis => { 
     if (crisis) { 
     return crisis; 
     } else { // id not found 
     this.router.navigate(['/crisis-center']); 
     return false; 
     } 
    }); 
    } 
}