웹 컴포넌트의 메소드 호출 및 이벤트에 응답

Question

일부 애니메이션이있는 Web_ui 패키지로 사용자 정의 요소를 만든 다트 프로젝트에서 작업하고 있습니다. 내가 뭘 바라고하는 것은 .... 이런 요소 뭔가 다트 코드 내에서 다트 응용 프로그램 자체 나는 이런 식으로 뭔가가의 main() 함수에서 다음

class MyElement extends WebComponent { 
    ... 

    void StartAnimation() { ... } 

    ... 
} 

등을하는 것입니다 ..

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

Dart 편집기는 웹 구성 요소를 직접 구성하는 것이 현재 지원되지 않는다고 말합니다. 그런 다음 WebComponent.forElement를 사용하라고 말합니다. 그러나이를 사용하여 내 목표를 달성하는 방법이 명확하지 않습니다.

Answer 1

아직 웹 구성 요소를 Dart 파일로 가져올 수 없지만 query() 및 .xtag을 통해 액세스 할 수 있습니다. xtag은 요소가 연결된 웹 구성 요소 인스턴스에 대한 참조를 제공합니다. xtag에 값이 주어 지도록 웹 UI 설정을 완료하도록주의해야합니다.

다음은 예입니다 :

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

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

이 직접 요소를 서브 클래스, 구성 요소를 가져올 수있는 능력을 가진 더 얻을 것이다 어쩌면 당신은 다시 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(); 
}