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

Question

我正在开发一个 Dart 项目，在该项目中，我使用具有一些动画的 Web_ui 包创建了一个自定义元素。我希望做的是在元素的飞镖代码中包含这样的东西......

class MyElement extends WebComponent {
   ...

   void StartAnimation() { ... }

   ...
}

然后在飞镖应用程序本身的 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();
}