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

Question

我知道有2 similar关于这个的问题，但没有任何解决方案。

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

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

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

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

添加:

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

Answer 1

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

An implementation of ResourceLoader that uses a template cache to avoid doing an actual ResourceLoader.

The template cache needs to be built and loaded into window.$templateCache via a separate mechanism.

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

{provide: ResourceLoader, useClass: CachedResourceLoader}

已在现有 RESOURCE_CACHE_PROVIDER 中定义导出。

window.$templateCache 应该包含成对的 URL 和响应。

由于 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可以代替使用。