Angular2它們如何保存到緩存？

Question

我試了5分鐘Anuglar2教程，當它說你可以使用外部模板我試過了。

我的組件看起來像這樣

import {Component, Template, bootstrap} from 'angular2/angular2'; 

// Annotation section 
@Component({ 
    selector: 'my-app' 
}) 
@Template({ 
    url: "component.html" 
}) 
// Component controller 
class MyAppComponent { 
    constructor() { 
    this.name = 'Alice'; 
    } 
} 

bootstrap(MyAppComponent); 

我在外部模板裏有一個錯誤，並修復它，但HTML文件仍緩存，所以我不能在瀏覽器中的效果。

搞清楚他們如何緩存它，我看了看代碼上Github

我發現這個

#angular/modules/angular2/src/core/compiler/template_loader.js 

@Injectable() 
export class TemplateLoader { 
    _xhr: XHR; 
    _htmlCache: StringMap; 
    _baseUrls: Map<Type, string>; 
    _urlCache: Map<Type, string>; 
    _urlResolver: UrlResolver; 

    constructor(xhr: XHR, urlResolver: UrlResolver) { 
    this._xhr = xhr; 
    this._urlResolver = urlResolver; 
    this._htmlCache = StringMapWrapper.create(); 
    this._baseUrls = MapWrapper.create(); 
    this._urlCache = MapWrapper.create(); 
    } 

    // TODO(vicb): union type: return an Element or a Promise<Element> 
    load(template: Template) { 
    if (isPresent(template.inline)) { 
     return DOM.createTemplate(template.inline); 
    } 

    if (isPresent(template.url)) { 
     var url = this.getTemplateUrl(template); 
     var promise = StringMapWrapper.get(this._htmlCache, url); 

     if (isBlank(promise)) { 
     promise = this._xhr.get(url).then(function (html) { 
      var template = DOM.createTemplate(html); 
      return template; 
     }); 
     StringMapWrapper.set(this._htmlCache, url, promise); 
     } 

     return promise; 
    } 

所以我檢查了StringMapWrapper 角/模塊/ angular2/src目錄/門面/集。 ES6

和集代碼只是

static set(map, key, value) { 
    map[key] = value; 
    } 

我看到StringMapWrapper來自全球

export var StringMap = global.Object; 

但看在角/模塊/ angular2/src目錄/門面/ lang.es6我無法揣摩出的地圖緩存。

我對緩存過程知之甚少，希望有人能解釋在這種情況下他們是如何做到的。

Answer 1

StringMapWrapper.create()創建對象文字{}。他們使用類似StringMapWrapper的Dart支持，其中這些原語在其他語言中以不同方式創建。總之所有他們正在做的是這個

var cache = {}; 
xhr(templateUrl).then(template => { 
    cache[templateUrl] = template; 
    return template; 
}) 

Answer 2

@ gdi2290幾乎已經回答了你的問題，如果你想了解更多關於高速緩存管理在JavaScript /打字稿，請在這裏看到http://www.ravinderpayal.com/blogs/12Jan2017-Ajax-Cache-Mangement-Angular2-Service.html我的職務。

有一個緩存管理類的一步一步解釋，它充當Layer到AJAX，並可以作爲服務注入組件。這裏是一個類的代碼大綱： -

private loadPostCache(link:string){ 
    if(!this.loading[link]){ 
       this.loading[link]=true; 
       this.links[link].forEach(a=>this.dataObserver[a].next(false)); 
       this.http.get(link) 
        .map(this.setValue) 
        .catch(this.handleError).subscribe(
        values => { 
         this.data[link] = values; 
         delete this.loading[link]; 
         this.links[link].forEach(a=>this.dataObserver[a].next(false)); 
        }, 
        error => { 
         delete this.loading[link]; 
        } 
       ); 
      } 
    } 

    private setValue(res: Response) { 
     return res.json() || { }; 
    } 

    private handleError (error: Response | any) { 
     // In a real world app, we might use a remote logging infrastructure 
     let errMsg: string; 
     if (error instanceof Response) { 
      const body = error.json() || ''; 
      const err = body.error || JSON.stringify(body); 
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
     } else { 
      errMsg = error.message ? error.message : error.toString(); 
     } 
     console.error(errMsg); 
     return Observable.throw(errMsg); 
    } 

    postCache(link:string): Observable<Object>{ 

     return Observable.create(observer=> { 
      if(this.data.hasOwnProperty(link)){ 
       observer.next(this.data[link]); 
      } 
      else{ 
       let _observable=Observable.create(_observer=>{ 
        this.counter=this.counter+1; 
        this.dataObserver[this.counter]=_observer; 
        this.links.hasOwnProperty(link)?this.links[link].push(this.counter):(this.links[link]=[this.counter]); 
        _observer.next(false); 
       }); 
       this.loadPostCache(link); 
       _observable.subscribe(status=>{ 
        if(status){ 
         observer.next(this.data[link]); 
        } 
        } 
       ); 
      } 
      }); 
     }