Question

我正在开发一个Dart项目，我用Web_ui包创建了一个带有动画的自定义元素。我希望做的是在dart代码中包含类似这样的元素......

class MyElement extends WebComponent {
   ...

   void StartAnimation() { ... }

   ...
}

然后在dart app本身的main（）函数中我有这样的东西......

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

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

Answer 1

虽然您尚无法将网络组件导入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();
}

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

1 个答案: