events - 调用Web组件的方法并响应事件

Question

我正在Dart项目中工作，在该项目中，我使用带有动画的Web_ui包创建了一个自定义元素。我希望做的是在dart代码中为该元素添加类似这样的内容...。

class MyElement extends WebComponent {
   ...

   void StartAnimation() { ... }

   ...
}

然后在dart应用本身的main()函数中，我有类似的内容...

void main() {
    MyElement elm = new MyElement();
    elm.StartAnimation();  // Kicks off the animation
}

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

Answer 1

虽然您尚不能将Web组件导入Dart文件，但是可以通过query()和.xtag访问它们。 xtag为您提供与元素关联的Web组件实例的引用。必须确保允许完成Web UI设置，以便为xtag赋值。

这是一个例子:

import 'dart:async';
import 'dart:html';
import 'package:web_ui/web_ui.dart';

main() {
  Timer.run(() {
    var myElement = query('#my-element').xtag;
    myElement.startAnimation();
  });
}

通过导入组件，直接将Element子类化以及可能保证您从 query()返回正确的类的某些生命周期事件的能力，这将变得更好。这是示例在将来的样子:

import 'dart:async';
import 'dart:html';
import 'package:web_ui/web_ui.dart';
import 'package:my_app/my_element.dart';

main() {
  MyElement myElement = query('#my-element');
  myElement.startAnimation();
}