如何解决Lit-element,如何连接TemplateResult?
我们有一个自定义模板元素,用于显示标题标题,我们希望扩展此组件以在单击按钮时也显示带有面包屑的标题标题。
示例代码:
... private getTemplateResultFromProperty: TemplateResult[] = []; ...
//This works fine:
func1(): TemplateResult {
return html`
<custom-header-template
.data=${data}'>
</custom-header-template>`
}
//Can't return concatenated header
func2(): TemplateResult {
//repeat does not work,this returns empty strings
return html`${repeat(this.getTemplateResultFromProperty,t => t)}`;
}
我们只能在 func2 方法中通过指定一个数组元素而不使用 html`` 来返回和显示新标题,如下所示:return this.headerTemplateArray[1]
但这不是我们所做的想做..
错误消息:Uncaught (in promise) TypeError: Cannot read property 'split' of null at new Template (template.js:87)
当我们尝试这样做时:return html`${this.getTemplateResultFromProperty}`;
html`` 方法在这种方法中似乎对我们根本不起作用...... 所以我们怀疑我们使用 repeat() 的方式可能有问题,或者我们以错误的方式连接/使用 TemplateResult。
有什么想法吗?
解决方法
lit-html 支持渲染任何其他可渲染值的数组,包括 TemplateResults。如果不需要修改数组,应该可以返回数组,而且它确实已经是一个 TemplateResults 数组。
func2(): Array<TemplateResult> {
this.getTemplateResultFromProperty;
}
如果由于某种原因您需要将其放入单个 TemplateResult 以用于其他一些非 lit-html 代码(我希望不是这种情况,如果是这样,也许您可以扩大您的类型),然后你可以只包装数组:
func2(): TemplateResult {
html`${this.getTemplateResultFromProperty}`;
}
如果这不起作用,那么我怀疑 getTemplateResultFromProperty
实际上不是 Array<TemplateResult>
。既然您似乎已经尝试过,那么您可以内省该变量以确保它确实是一个数组或可迭代的吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。