如何捕获 templateUrl 加载错误答案

【问题标题】：How to catch a templateUrl load error如何捕获 templateUrl 加载错误
【发布时间】：2016-01-29 14:55:22
【问题描述】：

假设对组件模板的请求，无法交付（状态码 400 等），有没有办法捕获错误以便采取行动（重定向等... )

谢谢。

【问题讨论】：

可能有一些http 拦截器，这有助于在通过http 协议获取任何内容时发现错误..
@PankajParkar 我想要的是在发生错误时的某种回退，假设我有一个仪表板并且其中一个组件无法呈现，我可以使用“ static”模板说“错误”，而不是“破坏”应用程序。可能类似于 angular1 中的 $templateRequest ...
@JoãoAugusto 听起来不像 Angular1 中的 $rotueChangeError 事件？
@PankajParkar 我在同一条路线上。只是有很多组件，我想要一个“内联静态错误”模板，以防无法获得其中一个模板。

标签： angular angular2-template

【解决方案1】：

我知道这个问题很老了，但是今天我们有一个更好的解决方案。

Angular 提供了一个名为 ResourceLoader 的类，您可以扩展并创建自己的实现来覆盖基本行为。

我创建了一个从 ResourceLoader 扩展的 CustomResourceLoader 以在 templateUrl 请求上插入令牌，因为我的页面是由服务器提供的。

因此，您可以使用它来捕获错误并制作您想要的东西。

您可以在this 链接上看到ResourceLoader 的角度实现，以及如何正确扩展here 的示例。

【讨论】：

【解决方案2】：

目前我不知道在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() {
  }
}

我知道这不是最佳解决方案。但目前我认为这是一个简单的解决方法，可以让您在模板文件不存在的情况下进行回退。

【讨论】：

【解决方案3】：

AFAIK 目前（beta.2）没有这样的机制。

您可以检查获取模板的normalizeTemplate方法的source code，如果发生错误，我认为没有办法插入一些逻辑。

【讨论】：

【解决方案4】：

使用 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;
      }
    });
  }
}

【讨论】：