我有多个嵌套的Web组件代表一个网格。我需要用 Dart 代码编写这些。
我有一个功能可以按照dart docs的建议创建Web组件:

void addWebComponent(WebComponent component,String tagName,WebComponent parent) {
    component.host = (new Element.html("<${tagName}></${tagName}>"));
    var lifecycleCaller = new ComponentItem(component)
    ..create();
    parent.append(component.host);
    lifecycleCaller.insert();
    return;
}

每个Web组件都包含一个模板,如下所示:

  <template>
      <div class="grid">
         <div class="large-12 columns" >
            <content></content>
         </div>
       </div>
  </template>

我的假设是调用 parent.append(component.host); 会将注入(inject)的Web组件html添加到CONTENT元素中。没有。
结果就是我所期望的:

<x-grid>
      <div class="grid">
         <div class="large-12 columns">
             <x-row>
                  <div class="row">...</div>
             </x-row>
         </div>
       </div>
</x-grid>

这就是我得到的:

 <x-grid>
      <div class="grid">
         <div class="large-12 columns">
                 **[Content should be here!]**
         </div>
       </div>
         **[ CONTENT ENDS UP HERE]**
         <x-row>
                  <div class="row">...</div>
             </x-row>

</x-grid>

我的猜测是,从dart代码中,您无法通过parent.append(component.host)将其添加到Web组件的内容中。是否需要其他功能或步骤才能完成这项工作?
这太痛苦了。

最佳答案

试试这个:

添加到父项:

List<WebComponent> items = toObservable([]);

更改:

parent.append(component.host);

至:

parent.items.add(component);

然后将HTML修改为:

<template>
  <div class="grid">
     <div class="large-12 columns" template iterate="item in items">
        {{ new SafeHtml.unsafe(item.host.innerHtml) }}
     </div>
  </div>
</template>

10-06 08:01