是否可以使用TypeScript将HTML文件导入为字符串？ [英] Is it possible to import an HTML file as a string with TypeScript?

问题描述

例如，假设我们正在开发一个Angular2项目，并且我们希望避免设置模板作为一个外部url，以减少http请求。我们仍然不想在组件中编写所有HTML，因为它可能足够大，或者我们希望设计人员使用不同于开发人员的文件。

所以这里是一个第一个解决方案：
$ b 文件 template.html.ts
将文件转换为.ts文件像这样：

  export const htmlTemplate =`
< h1>我的Html< / h1> 
`; 
  

然后在我的组件中，我可以像这样导入它：

 从'angular2 / core'导入{Component}; 
从'angular2 / router'导入{RouteParams，RouterLink}; 
从'./template.html'导入{htmlTemplate}; 
 
 @Component（{
 selector：'home'，
 directives：[RouterLink]，
 template：htmlTemplate，
}）
  

实际上，这个工作原理非常完美，但是您将丢失IDE HTML智能，所以这对创建HTML的设计器/ dev不利模板。

我想要实现的是找到一种方法来导入 .html 文件，而不是.ts。

那么是否有可能在TypeScript中将.html文件作为字符串导入？

<现在可以这样做：

  import模板。 HTML; 
 
 @Component（{
 selector：'home'，
 directives：[RouterLink]，
 template：require（template.html），
}）
  

这会将template.html包含到组件的依赖项列表中，然后您可以将它与您的构建器捆绑在一起（实际上，它对 amd 更有意义）然而，正如您所建议的，最好使用 webpack 。

看看这个 starter pack

---

UPDATE 现在您可以声明一个 html 模块，如下所示：

 声明模块* .html{
 const content：string; 
导出默认内容; 
} 
  

并像这样使用它：

 导入*作为模板来自template.html; 
 
 @Component（{
 selector：'home'，
 directives：[RouterLink]，
 template：template 
}）
  

I wonder if it is possible to do as the title said.

For example let's say we are working on a Angular2 project and we want to avoid set the template as an external url in order to have less http requests. Still we don't want to write all the HTML within the component because maybe it's big enough or we want designers to work in different files than devs.

So here is a first solution:

File template.html.ts Transform a file to .ts to something like this:

export const htmlTemplate = `
   <h1>My Html</h1>
`;

Then in my component I can import it like this:

import { Component } from 'angular2/core';
import {RouteParams, RouterLink} from 'angular2/router';
import {htmlTemplate} from './template.html';

@Component({
  selector: 'home',
  directives: [RouterLink],
  template:  htmlTemplate,
})

Actually this works perfectly but you are loosing the IDE HTML intelligence so this is bad for the designer/dev that creates the HTML templates.

What I'm trying to achieve is to find a way to import .html files and not .ts.

So is it possible to import an .html file as a string in TypeScript?

解决方案

You can do this now:

import "template.html";

@Component({
  selector: 'home',
  directives: [RouterLink],
  template:  require("template.html"),
})

this will include "template.html" to the dependencies list of your component and then you can bundle it with your builder (actually, it makes more sense with amd)

However, as you were suggested, it's better to use webpack.

Take a look at this starter pack

---

UPDATE now you can declare an html module like so:

declare module "*.html" {
    const content: string;
    export default content;
}

and use it like so:

import * as template from "template.html";

@Component({
  selector: 'home',
  directives: [RouterLink],
  template: template
})

这篇关于是否可以使用TypeScript将HTML文件导入为字符串？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！