扩展dart:html类；按钮元素“；飞镖_Html_Dart_Dart Polymer

扩展dart:html类；按钮元素“；飞镖

html dart

扩展dart:html类；按钮元素“；飞镖,html,dart,dart-polymer,Html,Dart,Dart Polymer,我试图扩展一个，但到目前为止没有成功。我做错了什么。我正在使用Dart编辑器+SDK 1.5.2 在pubspec.yaml中，聚合物的版本设置为： polymer: ">=0.11.0 <0.12.0" 查看/ext_button.html <!DOCTYPE html> <html> <head> <!-- <script src="packages/web_components/platform.js">&

我试图扩展一个

，但到目前为止没有成功。我做错了什么。我正在使用Dart编辑器+SDK 1.5.2 在pubspec.yaml中，聚合物的版本设置为：

polymer: ">=0.11.0 <0.12.0"

查看/ext_button.html

<!DOCTYPE html>

<html>
  <head>
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Polymer >= 0.14.0 -->
    <script src="packages/web_components/dart_support.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Extended Button - Dart v1.5.2</title>

    <!--Extended Button-->     
    <link rel="import" href="view/ext_button.html" />                            

  </head>
  <body>

      <button is="ext-button">Test Button</button>                    

    <script type="application/dart">export "package:polymer/init.dart";</script>
  </body>
</html>

<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="ext-button" extends="button">
  <template>    
  </template>
  <script type="application/dart" src="ext_button.dart"></script>
</polymer-element>

<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="ext-button" extends="button">
  <template> 
<content></content>   
  </template>
  <script type="application/dart" src="ext_button.dart"></script>
</polymer-element>

因此，上面的代码不起作用，但只要像下面那样编写它（只是为了验证ext按钮是否起作用），它就会告诉我以下内容： “web/index.html:20:7:自定义元素“ext-button”从“button”扩展而来，但此标记将不包括“button”的默认属性。要解决此问题，请将此标记写为

，或从自定义元素声明中删除“extends”属性。”

测试按钮

所以有点困惑；-）我认为解决方法简单易行，但我看不出问题所在-（

在我看来，你错过了以下几点：

在自定义元素构造函数中调用
```
polymerCreated（）
```
和
```
用聚合物扩展按钮元件
```

已经有类似的问题了。等我有更多时间的时候我会查一下。也许你自己也能找到。如果你找到了，请添加一个带有链接的评论。

以上两件事解决了问题，仅供参考。这里是更新的部分，现在它的工作

查看/ext_按钮。省道

import "dart:html"; import "package:polymer/polymer.dart"; @CustomTag("ext-button") class ExtButton extends ButtonElement { ExtButton.created() : super.created(); factory ExtButton(){ onClick.listen(clicked); } void clicked(MouseEvent e){ print("Ext-Button clicked"); } }

import "dart:html"; import "package:polymer/polymer.dart"; @CustomTag("ext-button") class ExtButton extends ButtonElement with Polymer { ExtButton.created() : super.created() { polymerCreated(); onClick.listen(clicked); } void clicked(MouseEvent e){ print("Ext-Button clicked"); } }
查看/ext_button.html

<!DOCTYPE html> <html> <head>  <script src="packages/web_components/dart_support.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Extended Button - Dart v1.5.2</title>  <link rel="import" href="view/ext_button.html" /> </head> <body> <button is="ext-button">Test Button</button> <script type="application/dart">export "package:polymer/init.dart";</script> </body> </html>

<!DOCTYPE html> <link rel="import" href="packages/polymer/polymer.html"> <polymer-element name="ext-button" extends="button"> <template> </template> <script type="application/dart" src="ext_button.dart"></script> </polymer-element>

<!DOCTYPE html> <link rel="import" href="packages/polymer/polymer.html"> <polymer-element name="ext-button" extends="button"> <template> <content></content> </template> <script type="application/dart" src="ext_button.dart"></script> </polymer-element>