15

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

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

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

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

4

2 回答 2

7

如果你使用 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'));
});
于 2015-12-24T22:51:52.227 回答
1

由于 Webpack 是新的 Gulp（Gulp 也需要一些帮助），这就是我想出的（使用手写笔和玉石） ......

像这样使用 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'))],
    ...
})

确保使用stylesandtemplate而不是templateUrlandstyleUrls

于 2016-06-30T17:31:31.593 回答