Вызов метода веб-компонента и ответ на события

Question

Я работаю над проектом Dart, где я создал пользовательский элемент с пакетом Web_ui, который имеет некоторую анимацию. То, что я надеялся сделать, это иметь внутри кода дротика для элемента что-то вроде этого...

class MyElement extends WebComponent {
   ...

   void StartAnimation() { ... }

   ...
}

а затем в функции main() самого приложения dart у меня есть что-то вроде этого...

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

Редактор Dart сообщает мне, что прямое создание веб-компонента в настоящее время не поддерживается. Затем он говорит использовать WebComponent.forElement - но я не совсем понимаю, как использовать это для достижения моей цели.

Answer 1

Хотя вы еще не можете импортировать веб-компоненты в файл Dart, вы можете получить к ним доступ через query() а также .xtag, xtag дает ссылку на экземпляр веб-компонента, с которым связан элемент. Вы должны быть осторожны, чтобы разрешить установку веб-интерфейса, чтобы 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();
}