Javascript Angular2它们如何保存到缓存？

我正在试用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文件仍然被缓存，因此我无法在浏览器中显示效果

为了弄清楚他们是如何缓存的，我查看了上面的代码

我找到了这个

#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来自global

export var StringMap = global.Object;

但是查看angular/modules/angular2/src/facade/lang.es6我不知道地图缓存在哪里

---

我对缓存过程了解不多，希望有人能解释一下在这种情况下是如何进行的。

StringMapWrapper.create（）

创建一个对象文本

{}

。他们使用类似于

StringMapWrapper

的东西来支持Dart，其中这些原语是以其他语言创建的。简言之，他们所做的就是这样

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

---

@gdi2290几乎回答了您的问题，如果您想了解更多关于JavaScript/TypeScript中缓存管理的信息，请参阅我在这里的帖子

这里有一个关于缓存管理类的逐步说明，该类充当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]);
                     }
                     }
                 );
             }
            });
        }

私有加载后缓存（链接：字符串）{
如果（！this.loading[link]）{
this.loading[link]=true；
this.links[link].forEach（a=>this.dataObserver[a].next（false））；
this.http.get（链接）
.map（此.setValue）
.抓住（这个.把手错误）.订阅(
值=>{
此.data[链接]=值；
删除此项。加载[链接]；
this.links[link].forEach（a=>this.dataObserver[a].next（false））；
},
错误=>{
删除此项。加载[链接]；
}
);
}
}
私有设置值（res:Response）{
返回res.json（）|{}；
}
私有句柄错误（错误：响应|任意）{
//在现实世界的应用程序中，我们可能会使用远程日志记录基础设施
让errMsg:string；
if（响应的错误实例）{
const body=error.json（）；
const err=body.error | | JSON.stringify（body）；
errMsg=`${error.status}-${error.statusText | |'''}${err}`；
}否则{
errMsg=error.message？error.message:error.toString（）；
}
控制台错误（errMsg）；
返回可观察抛出（errMsg）；
}
后缓存（链接：字符串）：可观察{
返回可观察的。创建（观察者=>{
if（this.data.hasOwnProperty（link））{
observer.next（this.data[link]）；
}
否则{
让_observable=可观察。创建（_observable=>{
this.counter=this.counter+1；
this.dataObserver[this.counter]=\u observer；
this.links.hasOwnProperty（link）？this.links[link].push（this.counter）：（this.links[link]=[this.counter]）；
_观察者：下一个（假）；
});
此.loadPostCache（链接）；
_可观察。订阅（状态=>{
如果（状态）{
observer.next（this.data[link]）；
}
}
);
}
});
}

当您告诉浏览器清除缓存并重新加载时，它是否起作用？另外，您使用的是什么HTTP服务器，HTTP响应中的头是什么？是的，在清除缓存时工作。我只是想知道它是如何进入缓存的。我似乎在代码中找不到发生这种情况的地方。如果您使用的是Chrome，请转到开发工具并设置“在开发工具打开时禁用缓存”设置，这是否会导致缓存被禁用？是的，然后所有内容都将按应有方式更新。浏览器是否自动缓存？缓存是由HTTP服务器的缓存头驱动的

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