templateUrlの読み込みエラーをキャッチする方法

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）のようなメカニズムはありません。

normalizeTemplateメソッドのsource codeをチェックしてテンプレートを取得する方法があります。エラーが発生した場合は、ロジックを接続する方法はないと思います。

Answer 3

angle2の新しいリゾルバを使用すると、テンプレートをロードする前にデータをプリフェッチできます。テンプレートをプリフェッチするために同じメカニズムを使うことができると思います。 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; 
     } 
    }); 
    } 
}