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

我想知道是否有可能按照标题所说的那样做

例如，假设我们正在处理Angular2项目，为了减少http请求，我们希望避免将模板设置为外部url。我们仍然不想在组件中编写所有的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,
})

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'.

实际上，这非常有效，但是您正在失去IDE HTML智能，因此这对创建HTML模板的设计器/开发人员来说是不好的

我试图实现的是找到一种导入.html文件而不是.ts的方法

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

您现在可以执行以下操作：

import "template.html";

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

这将在组件的依赖项列表中包含“template.html”，然后您可以将其与构建器捆绑在一起（实际上，它在

amd

中更有意义）

但是，正如建议的那样，最好使用

webpack

看看这个

---

更新现在您可以像这样声明

html

模块：

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

并像这样使用它：

import * as template from "template.html";

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

---

@维克多的上述回答几乎奏效；然而，

*as

部分意味着整个模块被分配给指针

模板

，而我们只需要内容。编译器错误如下所示：

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,
})

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'.

更正的导入语句（在编写本文时，使用TypeScript 2.3.3）如下所示：

import template from "template.html";

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

最简单的答案：

使用：

templateUrl

例如：

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

---

注意：.html文件必须位于同一个组件文件夹中，或者您必须修改您的路径

我所做的就是将

require

与webpack一起使用，创建一个html文件，然后使用

template:require（'component.html'）

将其作为字符串导入。是的，这是一种方法。谢谢你的加入，我也会玩它，我会让你知道我的想法。虽然不是你想要的解决方案，但我在构建时使用gulp angular embed templates在我的js类中嵌入html模板是的，这是事实，我正在搜索更“原生”的这是一个学术问题，如果我可以这么说的话。出于某种原因，我认为这是不对的。Import&require文件看起来很奇怪，方法不正确。尽管如此，谢谢你的回答，我也会测试它。然后我会得到“找不到模块X”的错误。这个答案针对的是哪个版本的typescript？@BryanRayner请看这里Hi@Veikedo使用这个结构现在产生了一个错误：“{template:typeof.html；selector:string；}”类型的[ts]参数不能分配给“Component”类型的参数。属性“template”的类型不兼容。类型“typeof.html”“'不可分配给类型'string'。”我也尝试过这样的结构：编译，但出现了浏览器错误：“错误：没有为组件AppComponent指定模板”我是否遗漏了任何内容或犯了明显的错误？@croksey我认为您的*.html模块声明有问题。您能显示完整的代码吗？