angular - 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

私の知る限り、現在（beta.2）そのようなメカニズムはありません。

テンプレートをフェッチするメソッドのソースコードを確認でき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;
      }
    });
  }
}