导入 HTML 模板并在标记的模板文字中使用它们 [重复]答案

【问题标题】：Importing HTML templates and using them in tagged template literals [duplicate]导入 HTML 模板并在标记的模板文字中使用它们 [重复]
【发布时间】：2018-10-21 01:32:28
【问题描述】：

我目前正在试验使用 lit-html 的 LitElement。 lit-html 希望这样提供内容：

html`Content goes here ${variable} <button on-click="${(e) => myEvent()}"`

我可以使用 raw-loader、html-loader 甚至 es6-template-string-loader 导入模板。我无法以正确的格式将其提供给 HTML 函数。

html 是一个函数，它接受一个字符串和值的数组。使用标记语法会为您处理字符串和变量的拆分。

我的问题是，如何动态提供导入模板的html函数，或者我如何自己处理模板的拆分？

编辑：为了清楚起见，我并没有尝试将字符串转换为模板文字。我正在尝试为标记函数动态提供模板文字。使用

tag`${templateLiteral}`

语法将内容存储在一个变量中，并且不起作用。使用

tag(templateLiteral)

语法不正确，因为标签函数需要标签（字符串数组，...值）。

【问题讨论】：

加载的文件只是一个字符串，所以它应该被副本覆盖。
使用 es6-template-string-loader，情况并非如此。我遇到的问题不是如何将字符串转换为模板文字，而是如何将文字提供给标记函数。即使没有导入，我也在询问如何存储模板文字，然后动态地将其提供给标记函数。请取消重复。

标签： javascript ecmascript-6

【解决方案1】：

如果我对您的理解正确，您希望拥有多个模板，对吗？你可以做的是这样的：

render() {
const differentTemplate = html`<p>Hello world!</p>`;
return html`Content goes here ${differentTemplate} 
<button @click="${(e) => myEvent()}>Click me</button>`;
}

由于html 只返回TemplateResult，您也可以将它们嵌套在一起。

还要注意您的事件绑定是错误的。我在示例中修复了它。

【讨论】：