Cách bắt lỗi tải xuống mẫuUrl

Question

Giả sử rằng yêu cầu cho mẫu của một thành phần, không thể gửi được (mã trạng thái 400, v.v ..), có cách nào để bắt lỗi để thực hiện hành động không (chuyển hướng, v.v ...)

Cảm ơn.

Answer 1

Hiện tại tôi không biết cách bắt giữ trong số templateUrl.

Những gì chúng tôi có thể làm, như một giải pháp thay thế, đang thực hiện yêu cầu head để kiểm tra xem tệp có tồn tại hay không.

Vì vậy, thành phần của bạn sẽ giống như thế này:

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() { 
    } 
} 

Tôi biết đây không phải là một giải pháp tối ưu. Nhưng trong thời gian này tôi nghĩ rằng một giải pháp dễ dàng của nó sẽ cho phép bạn tạo một dự phòng trong trường hợp tệp mẫu không có mặt.

Answer 2

AFAIK hiện tại (beta.2) không có cơ chế như vậy.

Bạn có thể kiểm tra source code của phương pháp normalizeTemplate tìm nạp mẫu, tôi không nghĩ có cách nào để kết nối một số logic nếu xảy ra lỗi.

Answer 3

Sử dụng trình phân giải mới của angular2, bạn có thể tìm nạp trước dữ liệu trước khi tải mẫu. Tôi cho rằng bạn có thể sử dụng cùng một cơ chế để tìm nạp trước mẫu, ngay cả khi bạn chỉ cần vứt bỏ nó đi. Trong khối catch, bạn có thể chuyển hướng nếu có một số vấn đề với yêu cầu.

Có thông tin tốt và ví dụ hay tại số https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard, tôi đã bao gồm bên dưới trong trường hợp có điều gì đó xảy ra với liên kết.

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