我有多个嵌套的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>