如何在 TypeScript 中使用 es6 语法导入 .html 片段答案

【问题标题】：How to import .html fragment using es6 syntax in TypeScript如何在 TypeScript 中使用 es6 语法导入 .html 片段
【发布时间】：2016-07-14 01:22:48
【问题描述】：

如何从这样的相对路径导入 HTML 模板：

import customSelectHtml from "./custom-select.html!text";

TypeScript 编译器抱怨找不到模块。我试图创建一个环境模块定义，但它不允许模块名称中的相对路径。我使用 SystemJS 作为模块加载器。

【问题讨论】：

标签： import typescript ecmascript-6

【解决方案1】：

这是不可能的。

由于打字稿中module 的定义，据我所知，在 ES6 javascript (import) 中。模块不能是 html。常见的方法是导入一个 javascript 模块，该模块导出一个包含 html、css 等的字符串。但这不是使用原始 html 导入文件。

也许你也想看看html imports，但那是完全不同的事情。

【讨论】：

是的，导入是完全不同且不受支持的东西。解决方法很丑陋。虽然实际上可以使用非相对路径：stackoverflow.com/questions/30962590/…
这更像是一种 hack，而不是实际的做法。使用方法我将它称为“傻瓜”打字稿，将 html 视为有效的 javascript。到目前为止，我建议使用动态加载文件内容的“传统”方式。但无论如何 - 感谢您的链接，它很有用。
是的，经过一番思考，我同意并考虑使用导入语法加载 html 片段是一个错误，传统加载是正确的方式。
“打字稿是 javascript 的超集”>_

【解决方案2】：

我不了解 SystemJS，但这绝对可以使用 Webpack 和 html-loader

【讨论】：

【解决方案3】：

您可以使用 require 语法导入它

1) 创建 app.d.ts 文件并要求定义，以便打字稿知道这是函数。（您不需要添加任何附加库，systemJs 支持需要语法）

declare function require(params:string): any;

2) 现在您可以使用 var template = require('./custom-select.html!text')

我发现它更好，因为您可以使用 require 内联

var directive = {
   template: require('./custom-select.html!text'),
   scope: {}
}

【讨论】：

我知道，但这不是 ES6 语法，而且更冗长。
这需要 systemJs/Webpack 还是使用 typescript 编译器本身？
这需要 SystemJs Text 插件
重要的部分是声明“require”函数的定义。这使得 Typescript 忽略“require”函数，假设它的全局 n 不理会它。然后就可以使用合适的 webpack/systemjs 插件来加载文本、css、图片等。

【解决方案4】：

我没有使用 typescript，但我使用的是 ES6。可能对你有用。

我解决这个问题的方法是使用 ` ` 引号声明模板字符串。它对我来说很好，我很高兴知道是否有人认为这是一个坏习惯。

在带有 Angular(-ui-router) 的 sn-p 之下。

index.js

var indexTemplate = `
<div>
    <h1>{{ Index page }}</h1>
</div
`

export {indexTemplate}

config.js

import { indexTemplate } from './index.js'

function config($stateProvider){
    $stateProvider.state('index', {
        url: '/',
        controller: 'indexController',
        template: indexTemplate
    })
}

为了完整起见，这里假设 indexController 是在别处定义的。此外，此配置函数被导出到定义 app 的地方。但这一切都与问题无关。

【讨论】：