Question

我试图扩展PaperDialog，以便我可以设计它。我尝试使用this solution中的方法3，但使用Dart而不是JS。这是我的组成部分。

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">

<polymer-element name="hc-dialog" extends="paper-dialog" noscript>
  <template>
    <link href="hc-dialog.css" rel="stylesheet" type="text/css" />

    <shadow></shadow>
  </template>
</polymer-element>

组件似乎正确地呈现到DOM中 - 我可以通过添加opens =＆＃34; true＆＃34;来验证它是否正常运行。组件 - 例如，这可以很好地呈现：

<hc-dialog opened="true" closeSelector="[dismissive]" transition="paper-dialog-transition-bottom">
  <div layout horizontal>
    <span flex></span>
    <paper-button raised dismissive>Done</paper-button>
  </div>
</hc-dialog>

但是我不想让它自动显示，当试图找到一种通过Dart调用此组件上的toggle（）的方法时会出现问题。在上面链接的解决方案（working JS Fiddle）中，它通过JS调用：

<script>
  Polymer('x-dialog-3', {
    toggle: function() {
      this.$.dialog3.toggle();
    }
  });
</script>

但是如果我尝试在dart中实现相同的功能，我就无法检索到其上有toggle（）方法的组件：

shadowRoot.querySelector('hc-dialog').toggle();

导致Object.noSuchMethod。通过反射检查返回的对象清楚地表明了这一点：

var he = shadowRoot.querySelector('hc-dialog');
var cm = reflect(he).type;

while (cm != null) {
   print(cm);
   cm = cm.superclass;
}

给出：

ClassMirror on 'HtmlElement' (:1)
ClassMirror on 'Element' (:1)
ClassMirror on 'Node' (:1)
ClassMirror on 'EventTarget' (:1)
ClassMirror on 'NativeFieldWrapperClass2' (:1)
ClassMirror on 'Object' (:1)

==＆GT;我的Dialog不是PaperDialog / CoreOverlay，这就是我无法调用toggle（）的原因。

这种方法有什么问题？我如何获得可以调用toggle（）的东西？

Answer 1

Polymer.dart core-和paper-elements只是Polymer.js元素的包装。这些元素不支持扩展，因为Dart类不能扩展JS类。

扩展PaperDialog并通过Dart调用toggle（）

1 个答案: