Question

我目前正在尝试使用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)

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

Answer 1

如果我对您的理解正确，那么您想拥有多个模板，对吗？您可以执行以下操作：

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

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

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

导入HTML模板并在标记的模板文字中使用它们

1 个答案: