import 'package:web_ui/web_ui.dart';import 'dart:HTML';class FancyOptionComponent extends WebComponent { buttonElement _button; TextinputElement _textinput; FancyOptionComponent() { // obtain reference to button element // obtain reference to text element // Failed attempt //_button = this.query('.fancy-option-button'); // error: Bad state: host element has not been set. (no IDea) // make the background color of this web component the specifIEd color final changecolorFunc = (e) => this.style.backgroundcolor = _textinput.value; _button.onClick.Listen(changecolorFunc); }} FancyOption HTML：
<!DOCTYPE HTML><HTML> <body> <element name="x-fancy-option" constructor="FancyOptionComponent" extends="div"> <template> <div> <button class='fancy-option-button'>Click me!</button> <input class='fancy-option-text' type='text'> </div> </template> <script type="application/dart" src="fancyoption.dart"></script> </element> </body></HTML>
我在这样的页面上有三个.
<!DOCTYPE HTML><HTML> <head> <Meta charset="utf-8"> <Title>Sample app</Title> <link rel="stylesheet" href="myapp.CSS"> <link rel="components" href="fancyoption.HTML"> </head> <body> <h3>Type a color name into a fancy option textBox,push the button and see what happens!</h3> <div is="x-fancy-option" ID="fancy-option1"></div> <div is="x-fancy-option" ID="fancy-option2"></div> <div is="x-fancy-option" ID="fancy-option3"></div> <script type="application/dart" src="myapp.dart"></script> <script src="packages/browser/dart.Js"></script> </body></HTML>解决方法 只需使用getShadowRoot()并对其进行查询：
import 'package:web_ui/web_ui.dart';import 'dart:HTML';class FancyOptionComponent extends WebComponent { buttonElement _button; TextinputElement _textinput; inserted() { // obtain references _button = getShadowRoot('x-fancy-option').query('.fancy-option-button'); _textinput = getShadowRoot('x-fancy-option').query('.fancy-option-text'); // make the background color of this web component the specifIEd color final changecolorFunc = (e) => this.style.backgroundcolor = _textinput.value; _button.onClick.Listen(changecolorFunc); }} 其中x-fancy-option字符串是元素的名称.
注意：我将构造函数更改为inserted()方法,which is a life cycle method.
总结以上是内存溢出为你收集整理的Dart Web组件如何获得对其子代的引用？全部内容，希望文章能够帮你解决Dart Web组件如何获得对其子代的引用？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）