Question

这可能措辞不多，但在我现有的Angular 1项目中，我使用了一堆HTML资源，这些资源使用HTML2JS预编译到JS文件中。这很好用，所以现在我正在考虑我对Angular 2的方法。由于HTML2JS尚未更新，所有内容似乎都围绕着两种策略。

首先在@tempate atScript中添加HTML内联。这会缓存它，所以我不会一直都去服务器，但它也很难在IDE中格式化并降低可读性恕我直言。

第二种是使用外部文件并使用@template中的url。这似乎使事情更具可读性，但限制了缓存的数量。这意味着我需要进行更大的服务器调用，我希望避免这种情况。

有没有办法让文件从HTML开始然后编译成.js文件并包含在Angular2组件中？

Answer 1

如果您正在使用gulp进行编译，则可以使用angular-embed-templates插件。这里我将templateUrl加载到模板中，然后使用源贴图编译到dist文件夹中的javascript：

var gulp           = require('gulp');
var ts             = require('gulp-typescript');
var sourcemaps     = require('gulp-sourcemaps');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('ts:build', function () {
    gulp.src('app/**/*.ts')
        .pipe(embedTemplates())
        .pipe(sourcemaps.init())
        .pipe(ts({
            noImplicitAny: true,
            module: 'system',
            target: 'ES5',
            experimentalDecorators: true,
            moduleResolution: 'node',
            emitDecoratorMetadata: true
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./dist'));
});

Answer 2

由于Webpack是新的Gulp（also Gulp needs some help），here is what I came up with (uses stylus and jade) ......

使用像这样的Webpack加载器......

loaders: [
  {
    include: /\.pug/,
    loader: 'pug-html-loader'
  },
  {
    test: /\.styl$/,
    loader: 'style-loader!css-loader!stylus-loader'
  },
  {
    test: /\.ts$/,
    loader: 'ts'
  }
]

然后在您的组件中使用需要这样的......

@Component({
    ...
    template: String(require('./navbar.component.pug')),
    styles: [String(require('./navbar.component.styl'))],
    ...
})

请务必使用styles和template代替templateUrl和styleUrls

如何将JS HTML文件添加到Angular 2中的@Template（如$ templateCache）？

2 个答案: