Dart 向div动态添加web组件

我从生成单击计数器示例开始。我将点击计数器放入一个库中，然后将其导入到我的主文件中。在运行程序之前，通过将适当的HTML放入网页，可以手动添加click counter组件。然而，我一直无法找到一种方法来动态地将click counter web组件添加到div中。我的尝试要么以“Aw，snap！”错误结束，要么就是什么都没有发生

单击计数器（xclickcounter.dart）：

库点击计数器；
导入“包：web_ui/web_ui.dart”；
类计数器组件扩展WebComponent{
整数计数=0；
无效增量（）{
计数++；
}
}

主HTML：

示例应用程序
测试1
Dart的世界你好

主文件：

导入'dart:html'；
导入“包：web_ui/web_ui.dart”；
导入“xclickcounter.dart”；
//单击计数器的初始值
int startingCount=5；
void main（）{
//添加空按钮时没有错误
var button=新按钮元素（）；
查询（“#示例_容器_id”）.append（按钮）；
//不起作用（在Dartium中给出“啊，啪！”声）
查询（“#示例_容器_id”）.append（new CounterComponent（））；
//此代码不会发生任何变化。不会显示任何内容。
//但我保证同样的事情给了我哦，Snap
//对于一个非常相似的程序
最终TML=''；
查询（“#示例_容器_id”）.appendHtml（newComponentHtml）；
}

我尝试添加一个空构造函数来单击计数器，但它仍然崩溃

我也有同样的问题。 请参阅上的示例（不是我的），并让我知道它是否适用于您

TL；博士：

void main() {
  var element = query('#sample_container_id');
  appendComponentToElement(element, new CounterComponent() );
}

void appendComponentToElement(Element element, WebComponent component) {
  component.host = new DivElement();
  var lifecycleCaller = new ComponentItem(component)..create();
  element.append(component.host);
  lifecycleCaller.insert();
}

我的网站上有更多信息-ui@dartlang.org职位：

---

希望有帮助。

嗨。这解决了我的问题。我本来打算把代码作为一个新的答案发布，但我想让你得到分数，这样你就可以编辑你的代码，并附加代码。那我就把它标记为答案。