Javascript 在聚合物中的自定义元素/铁页上调用公共方法

在基本聚合物初学者工具包的my app文件中调用公共方法会解决类型错误。 下面是我如何使用公共方法的示例。但当我试图在我的应用程序文件的iron页面内的自定义元素上调用方法时，下面的代码不起作用

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

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

toggleDialog:function（）{
此.$.myDialog.toggleDialog（）；
}
toggleDialog:函数（）{
此.popUp.toggle（）；
}

下面的简化代码创建了错误。如果选择了my singlevideo页面，我将使用attributeChanged进行检查。如果是这样，我将尝试调用public方法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>

：主持人{
显示：块；
}
聚合物({
是：“我的应用程序”，
特性：{
第页：{
类型：字符串，
reflectToAttribute:true，
观察者：''u pageChanged'
},
},
观察员：[
“_routePageChanged（routeData.page）”
],
_页面更改：功能（第页）{
//按需加载页面导入。如果失败，则显示404页面
var resolvedPageUrl=this.resolveUrl（'my-'+page+'.html'）；
this.importHref（resolvedPageUrl，null，this.\u showPage404，true）；
},
_routePageChanged:功能（第页）{
this.page=第| |页“仪表板”；
},
attributeChanged:函数（名称、类型）{
if（this.getAttribute（name）='singlevideo'）{
这是$.singlevideo.callFunction（）；
}
},
});

如果要访问的页面（

）在主文档中是唯一的，则可以使用标准的

文档.querySelector（）

方法获取自定义元素：

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

或者，您可以按id查询：

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

然后对其调用public方法：

comp.changeContent()

---

你犯了什么错误？此外，请尝试添加断点以检查导航。当按下工具栏上的btn时，我没有发现任何错误。它获取一个console.log，但public方法从未到达页面。需要查看完整流程的代码才能调试我遇到的问题与您相同。我相信这在大约一年前确实奏效了。也许Polymer在这段时间里改变了一些东西。这已经有几年了，如果我回顾一下这个问题，我可以假设iron pages元素一直在保持我的函数调用，以在一个子组件中达到它的目标。我不记得我是否使用了任何懒散加载，这可能导致在选择要调用的元素时该元素不存在。问题不在于选择该元素。假设我在我的应用程序中选择了一个基本聚合物初学者工具包的自定义元素页面。如果我在自定义元素上调用一个公共方法，它将永远不会被调用，并发出一个（不是函数类型错误）。我的问题结构不同，除了querySelector Polymer1之外，我还添加了一些示例代码，我相信这是一个类似的缩写。这是$$.myStudentSearch