Question

当我们考虑在Angular2或Angular1.X中使用template时，我们知道以下是写作的基本方法之一：

template: './template-ninja.html'

使用Angular1.X，我们可以预先使用$templateCache.put()缓存所有模板，如下所示：

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

这将减少http请求的数量。我想知道如何使用Angular2实现相同的功能。有人可以帮忙吗？感谢。

Answer 1

吞掉-直列NG2模板

目前最好的解决方案是gulp-inline-ng2-template。

这将使用一个具有templateUrl属性的组件和一个html文件，并将其转换为带有内联模板的组件。

https://github.com/ludohenin/gulp-inline-ng2-template

Answer 2

我还不知道将为Angular 2缓存模板的库或工具，但到目前为止，我很高兴只使用内联模板而不是外部文件。使用es6反引号字符作为模板，它允许您在JavaScript中编写多行HTML并将所有内容保存在一个文件中。

https://github.com/angular-in-action/chapter2/blob/master/client/components/dashboard.ts#L12

Answer 3

使用以下替代方法：

导入RuntimeCompiler，reflector，ComponentFactory，ComponentResolver，ReflectorComponentResolver和ReflectionInfo
注入RuntimeCompiler
创建ComponentResolver实例
调用ComponentResolver.resolveComponent（SomeComponent）
检查缓存结果的reflector.propMetadata

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

注释是另一种方法：

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

<强>参考

Answer 4

<强>吞掉-NG2模板缠绕

您好，

希望这对您有所帮助：我刚写了一个小模块，允许您将所有html文件捆绑到单个ES6模块中。

https://github.com/evgenys91/gulp-ng2-template-wrap

Angular2中$ templateCache的替代方案

4 个答案:

吞掉-直列NG2模板