Javascript 是否可以使用 TypeScript 将 HTML 文件作为字符串导入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36649795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to import an HTML file as a string with TypeScript?
提问by Vassilis Pits
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.
例如，假设我们正在处理一个 Angular2 项目，并且我们希望避免将模板设置为外部 url 以减少 http 请求。我们仍然不想在组件中编写所有 HTML，因为它可能足够大，或者我们希望设计人员在与开发人员不同的文件中工作。
So here is a first solution:
所以这是第一个解决方案：
File template.html.tsTransform a file to .ts to something like this:
文件template.html.ts将文件转换为 .ts ，如下所示：
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.
实际上，这非常有效，但是您正在失去 IDE HTML 智能，因此这对创建 HTML 模板的设计人员/开发人员不利。
What I'm trying to achieve is to find a way to import .htmlfiles and not .ts.
我想要实现的是找到一种导入.html文件而不是 .ts 的方法。
So is it possible to import an .html file as a string in TypeScript?
那么是否可以在 TypeScript 中将 .html 文件作为字符串导入？
回答by Veikedo
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)
这会将“template.html”包含到组件的依赖项列表中，然后您可以将其与构建器捆绑在一起（实际上，使用更有意义amd）
However, as you were suggested, it's better to use webpack.
但是，正如您所建议的，最好使用webpack.
Take a look at this starter pack
看看这个入门包
UPDATEnow you can declare an htmlmodule like so:
UPDATE现在你可以html像这样声明一个模块：
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
})
回答by isolationism
@Veikedo's answer above almost works; however the * asportion means that the entire module is assigned to the pointer templatewhereas we only want the content. The compiler error looks like this:
@Veikedo 上面的回答几乎有效；然而，* as部分意味着整个模块都分配给了指针，template而我们只想要内容。编译器错误如下所示：
ERROR in /raid/projects/pulse/angular-components/src/lib/card/card.ts (143,12): Argument of type '{ moduleId: string; selector: string; template: typeof '*.html'; encapsulation: ViewEncapsulation...' is not assignable to parameter of type 'Component'.
The corrected import statement (at the time of writing, using TypeScript 2.3.3) is as follows:
更正的导入语句（在撰写本文时，使用 TypeScript 2.3.3）如下：
import template from "template.html";
@Component({
selector: 'home',
directives: [RouterLink],
template: template
})
回答by mentamarindo
Easiest answer:
最简单的答案：
Use: templateUrl
用： templateUrl
Example:
例子：
@Component({
selector: 'home',
directives: [RouterLink],
templateUrl: './template.html',
})
Note: the .html file have to be in the same component folder or you have to modify your path
注意：.html 文件必须在同一个组件文件夹中，否则你必须修改你的路径
