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

AFAIK 目前（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;
      }
    });
  }
}

Answer 4

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

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

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

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

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