Events 调用web组件的方法并响应事件

我正在进行一个Dart项目，在该项目中，我使用带有一些动画的Web_ui包创建了一个自定义元素。我希望做的是在元素的dart代码中包含这样的内容

MyElement类扩展了WebComponent{
...
void StartAnimation（）{…}
...
}

然后在dart应用程序本身的main（）函数中，我有如下内容

void main（）{
MyElement elm=新的MyElement（）；
elm.StartAnimation（）；//启动动画
}

---

Dart编辑器告诉我，目前不支持直接构建web组件。然后它说使用WebComponent.forElement——但我不清楚如何使用它来实现我的目标。

虽然您还不能将web组件导入Dart文件，但可以通过

query（）

和

.xtag

访问它们

xtag

提供与元素关联的web组件实例的引用。您必须小心，允许完成Web UI设置，以便为

xtag

指定一个值

下面是一个例子：

导入'dart:async'；
导入“dart:html”；
导入“包：web_ui/web_ui.dart”；
main（）{
Timer.run（）{
var myElement=query（“#我的元素”）.xtag；
myElement.startAnimation（）；
});
}

通过导入组件、直接为元素创建子类以及一些生命周期事件，可以保证从

query（）

返回正确的类，这将变得更好。这就是示例在将来的样子：

导入'dart:async'；
导入“dart:html”；
导入“包：web_ui/web_ui.dart”；
导入“package:my_app/my_element.dart”；
main（）{
MyElement MyElement=查询（“#我的元素”）；
myElement.startAnimation（）；
}

我一直在尝试，但是myElement总是空的。甚至编辑器也将变量涂成紫色，表示它将为null。当然，当我尝试运行代码时，我会得到一个错误“null对象没有方法‘StartAnimation’。”好的，我刚刚得到它。我明白你的意思了，你需要确保有足够的时间让xtag有价值。有没有比计时器更好的方法来知道xtag何时准备就绪？我不知道，而且我相信让事件堆栈展开所需的时间更少，因此

timer.run（）

应该足够了。