web-component - Lit-element，如何拼接TemplateResult？

Question

我们有一个显示标题标题的自定义模板元素，我们希望扩展此组件以在单击按钮时也显示带有面包屑的标题标题。

示例代码:

      ... 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`` 来返回和显示新 header ，如下所示: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。

有什么想法吗？

illustration

Answer 1

lit-html 支持渲染任何其他可渲染值的数组，包括 TemplateResults。如果您不需要修改它，您应该能够返回该数组，它确实已经是一个 TemplateResults 数组。

  func2(): Array<TemplateResult> {
    this.getTemplateResultFromProperty;
  } 

如果出于某种原因你需要将它放入一个单独的 TemplateResult 中用于一些其他非 lit-html 代码(我希望不是这种情况，如果是这样也许你可以扩大你的类型)，然后你可以只包装数组:

  func2(): TemplateResult {
    html`${this.getTemplateResultFromProperty}`;
  } 

如果这不起作用，那么我怀疑 getTemplateResultFromProperty实际上不是 Array<TemplateResult> .由于看起来您尝试过，您能否反省该变量以确保它确实是一个数组或可迭代的？