javascript - 是否可以使用 TypeScript 将 HTML 文件作为字符串导入？

Question

不知能否如题所说

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

所以这是第一个解决方案:

文件 template.html.ts 将文件转换为 .ts 格式如下:

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

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

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

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

实际上这很完美，但是您失去了 IDE HTML 智能，因此这对创建 HTML 模板的设计人员/开发人员不利。

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

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

Answer 1

您现在可以这样做:

import "template.html";

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

这会将“template.html”包含到您的组件的依赖项列表中，然后您可以将它与您的构建器捆绑在一起(实际上，使用 amd 更有意义)

但是，正如您所建议的，最好使用 webpack。

看看这个starter pack

---

更新 现在您可以像这样声明一个 html 模块:

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

然后像这样使用它:

import * as template from "template.html";

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