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

Question

我目前正在试验使用lit-html的LitElement。Lit-HTML 希望按以下方式提供内容：

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

我能够使用原始加载程序、html加载程序甚至es6模板字符串加载程序导入模板。我无法以正确的格式将其提供给HTML函数。

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

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

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

tag`${templateLiteral}`

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

tag(templateLiteral)

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

Answer 1

如果我没理解错的话，你想要多个模板，对吗？你可以这样做:

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

由于html只是返回TempateResault，因此您也可以将它们嵌套到彼此中。

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