如何使用CachedResourceLoader作为Angular2中$ templateCache的等效机制?

时间:2017-09-26 12:06:18

标签: javascript angularjs angular-templatecache

我知道有2 similar个问题,但没有任何解决方案。

所以我在Angular repo中发现this问题,他们要求相同,即Angular 2中的templateCache的替代方案,但他们关闭它说你可以使用CachedResourceLoader。

所以我的问题是如何使用这个CachedResourceLoader来替换templateCache ,我一直在google上搜索这个但是找不到相关的内容,所以也许我没有指向正确的方向或者我错过了什么。

这个问题的答案可能是其他两个类似问题的有效答案。

templateCache在AngularJS中提供的功能的代码示例:

增加

var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

检索通过$ templateCache:

$templateCache.get('templateId.html')

或检索:

myApp.component('myComponent', {
   templateUrl: 'templateId.html'
});

1 个答案:

答案 0 :(得分:3)

CachedResourceLoader是AngularJS $templateCache现有但尚未记录的Angular 2+替换:

  

使用模板缓存的ResourceLoader的实现   避免做一个实际的ResourceLoader。

     

模板缓存   需要构建并加载到窗口中。$ templateCache通过a   单独的机制。

它应该通过提供ResourceLoader提供者来工作:

{provide: ResourceLoader, useClass: CachedResourceLoader}

已在现有RESOURCE_CACHE_PROVIDER导出中定义。

window.$templateCache应包含成对的网址和回复。

由于在编译之前应指定ResourceLoader,因此不应在应用程序模块中提供,而应在编译器选项中提供。

以下是an example

import {RESOURCE_CACHE_PROVIDER} from '@angular/platform-browser-dynamic';
import {COMPILER_OPTIONS} from '@angular/core';

window['$templateCache'] = { 'app.html': `...`};

platformBrowserDynamic({
  provide: COMPILER_OPTIONS,
  useValue: { providers: [RESOURCE_CACHE_PROVIDER] },
  multi: true
}).bootstrapModule(AppModule)

与AngularJS $templateCache相反,CachedResourceLoader不允许对丢失的模板发出请求。这在大多数情况下是理想的行为。如果必须更改,则可以使用扩展默认ResourceLoader implementation的自定义实现。