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）没有这样的机制。

您可以查看提取模板的stringValue方法的source code，如果发生错误，我认为没有办法插入某些逻辑。

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请求中插入令牌，因为我的页面是由服务器提供的。

因此，您可以使用它来捕获错误并做出所需的操作。

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

如何捕获templateUrl加载错误

4 个答案: