在聚合物中的自定义元素/ iron-pages上调用公共方法

Question

在基本的聚合物初学者工具包的my-app文件中调用公共方法可以在TypeError中解析。下面是我如何使用公共方法的一个例子。但是，当我尝试在my-app文件的iron-pages中调用自定义元素的方法时，下面的代码不起作用。

 <!--Script in parent file-->
 <script>
   toggleDialog: function() {
     this.$.myDialog.toggleDialog();
   }
 </script>

 <!--Script in Child-->
 <script>
   toggleDialog: function () {
      this.$.popUp.toggle();
   }
 </script>

下面的简化代码创建了该错误。我正在与attributeChanged确认是否选择了my-singlevideo页面。如果是这样的话，我会尝试调用公共方法callFunction。

<dom-module id="my-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <app-location route="{{route}}"></app-location>
    <app-route
     route="{{route}}"
     pattern="/:page"
     data="{{routeData}}"
     tail="{{subroute}}"></app-route>

    <iron-pages
     selected="[[page]]"
     attr-for-selected="name"
     fallback-selection="404"
     role="main">
      <my-dashboard name="dashboard"></my-dashboard>
      <my-profile name="profile"></my-profile>
      <my-singlevideo name="singlevideo" id="singlevideo"></my-singlevideo>
    </iron-pages>

  </template>

  <script>
    Polymer({
      is: 'my-app',

      properties: {
        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged'
        },
      },

      observers: [
        '_routePageChanged(routeData.page)'
      ],

      _pageChanged: function(page) {
        // Load page import on demand. Show 404 page if fails
        var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
        this.importHref(resolvedPageUrl, null, this._showPage404, true);
      },

      _routePageChanged: function(page) {
        this.page = page || 'dashboard';
      },

      attributeChanged: function(name, type) {      
        if(this.getAttribute(name) == 'singlevideo') {
          this.$.singlevideo.callFunction();
        }
      },

   });
 </script>
</dom-module>

Answer 1

如果要访问的页面(<my-student-search>)在主文档中是唯一的，则可以使用标准document.querySelector()方法获取自定义元素：

var comp = document.querySelector( 'my-student-search' )

或者，您可以按id进行查询：

var comp = document.querySelector( 'my-student-search#theId' )

然后在它上调用它的公共方法：

comp.changeContent()