替代$ templateCache在Angular2 [英] Alternatives to $templateCache in Angular2

查看：185 发布时间：2016/4/6 20:41:32 angularjs angular2

本文介绍了替代$ templateCache在Angular2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我们认为Angular2或Angular1.X使用模板，我们知道下面是写作的基本方法之一：

When we think of using template in Angular2 or Angular1.X, we know below is one of the basic way of writing:

模板：./template-ninja.html

和与Angular1.X，我们可以previously缓存所有的模板和 $ templateCache.put（）如下：

and with Angular1.X, we can previously cache all of templates with $templateCache.put() as follows:

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

，这将减少http请求的数目。
我想知道我怎么能实现与Angular2相同。谁能帮助吗？
谢谢你。

which will lessen the number of http requests. I'd like to know how can I implement the same with Angular2. Could anyone help? Thanks.

推荐答案

使用以下选择：

导入RuntimeCompiler，ProtoViewFactory和ProtoViewRef

注入RuntimeCompiler

创建一个编译器实例

调用compiler.compileInHost（SomeComponent）

检查ProtoViewRef用于高速缓存的结果


    it('should cache the result', inject([AsyncTestCompleter], (async) => {
         PromiseWrapper
             .all([compiler.compileInHost(SomeComponent), compiler.compileInHost(SomeComponent)])
             .then((protoViewRefs) => {
               expect(protoViewRefs[0]).toBe(protoViewRefs[1]);
               async.done();
             });
       }));

注解是其他的方式来做到这一点：

Annotation is the other way to do it:


    it('should read the template from an annotation',
       inject([AsyncTestCompleter, Compiler], (async, compiler) => {
         compiler.compileInHost(SomeComponent)
             .then((hostViewFactoryRef) => {
               expect(hostViewFactoryRef.internalHostViewFactory).toBe(someHostViewFactory);
               async.done();
             });
       }));

参考