Question

如何从相对路径导入HTML模板，如下所示：

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

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

Answer 1

我没有使用打字稿，但我确实使用ES6。可能对你有用。

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

在Angular（-ui-router）的片段下面。

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在别处定义。此外，此配置功能还会导出到定义应用程序的位置。但这一切都与这个问题无关。

Answer 2

这是不可能的。

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

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

Answer 3

您可以使用require语法

导入它

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

declare function require(params:string): any;

2）现在您可以使用导入html了 var template = require（＆＃39; ./ custom-select.html！text＆＃39;）

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

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

Answer 4

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

来实现。

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

4 个答案: