टेम्पलेट को कैसे पकड़ें यूआरएल लोड त्रुटि

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 वर्तमान में (बीटा 2) ऐसी कोई व्यवस्था नहीं है।

आप normalizeTemplate विधि है कि टेम्पलेट को हासिल करेगा की source code जांच कर सकते हैं, मुझे नहीं लगता कि कोई त्रुटि होता है अगर कुछ तर्क प्लग करने के लिए एक रास्ता है है।

Answer 3

कोणीय 2 के नए रिज़ॉल्वर का उपयोग करके आप टेम्पलेट लोड करने से पहले डेटा को पूर्व-प्राप्त कर सकते हैं। मुझे लगता है कि आप टेम्पलेट को प्रीफेच करने के लिए उसी तंत्र का उपयोग कर सकते हैं, भले ही आप इसे फेंक दें। कैच ब्लॉक में आप अनुरोध के साथ कुछ समस्या होने पर रीडायरेक्ट कर सकते हैं।

अच्छी जानकारी है और 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; 
     } 
    }); 
    } 
}