Question

这是我的html结构，

//--this is index.html--//
<body>
  <my-app></my-app>
</body>


//--this is my-app.html--//
<dom-module id="my-app">
  <my-page1></my-page1>
  <my-page2></my-page2>
</dom-module>


//--this is my-page1.html--//
<dom-module id="my-page1">
  <script>
    class MyPage1 extends Polymer.Element {
      static get is() { return 'my-page1'; }

      covert_data(){
        alert("in covert_data");
      }
    }
    window.customElements.define(MyPage1.is, MyPage1);
  </script>
</dom-module>


//--this is my-page2.html--//
<dom-module id="my-page2">
  <paper-button on-tap="addData">Save</paper-button>
  <script>
    class MyPage1 extends Polymer.Element {
      static get is() { return 'my-page2'; }

      addData(){
        var host = document.querySelector('my-app').shadowRoot.querySelector('my-page1');
        host.covert_data();
      }
    }
    window.customElements.define(MyPage2.is, MyPage2);
  </script>
</dom-module>

<my-page1></my-page1>有一个名为covert_data()的方法。我正在尝试下面的代码。

WAY1：

  var host = document.querySelector('my-app').shadowRoot.querySelector('my-page1');
  host.covert_data();

这给了我错误host.covert_data is not a function

way2：

  document.querySelector('my-page1').covert_data();

这给了我错误Cannot read property 'covert_data' of null

如何在covert_data()中调用<my-page2></my-page2>方法聚合物2.0

Answer 1

在开始使用解决方案之前，我想给你一个提示。

请确保您发布了一段代码。

我工作Polymer已经有好几个月了，我花了15到20分钟才让你的代码正常工作。在15-20分钟的时间里，我想过很多次。

发布有效的代码可以帮助社区人员更好地帮助您。

现在解决方案

我在你的代码中发现了很多问题。我不知道是因为在SO中写了不完整的代码而哪些是真的，所以我会指出它们。

script

my-app

constructor和Super。

template

shadowDom

我不知道为什么way 1无效，它对我来说很好。我只能猜测可能是因为缺少constructor，但way 2无效，my-page1不会直接出现在document中。它是shadowRoot my-app的一部分。

以下是代码的工作代码段。我已将on-tap更改为on-click，以避免导入gesture个事件文件。

＆＃13;

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">


<!-- my-app element -->
<dom-module id="my-app">
  <template>   
    <my-page1></my-page1>
    <my-page2></my-page2> 
  </template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() {
        return 'my-app'
      }
      constructor() {
        super();
      }
    }
    window.customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>


<!-- page1 element -->
<dom-module id="my-page1">
  <script>
    class MyPage1 extends Polymer.Element {
      static get is() {
        return 'my-page1';
      }
      constructor() {
        super();
      }
      covert_data() {
        alert("in covert_data");
      }
    }
    window.customElements.define(MyPage1.is, MyPage1);
  </script>
</dom-module>

<!-- page2 element -->
<dom-module id="my-page2">
  <template> <div on-click="addData">Save</div></template>
  <script>
    class MyPage2 extends Polymer.Element {
      static get is() {
        return 'my-page2';
      }
      constructor() {
        super();
      }
      addData() {
        var host = document.querySelector('my-app').shadowRoot.querySelector('my-page1');
        host.covert_data();
      }
    }
    window.customElements.define(MyPage2.is, MyPage2);
  </script>
</dom-module>



<!-- calling element -->
<my-app></my-app>

＆＃13;

Answer 2

在<lrs-conv end-page="34" runhead="LMI v BAULDERSTONE" series="NSWLR" start-page="31" version="1" volume="53">：

page1.html

在this.dispatchEvent(new CustomEvent('upway-func', {detail: {op:"Optionally I can send some data"}}));中定义id to child元素以调用函数和on-upway-func事件：

myApp.html

如何在聚合物2.0中访问element1的shadowFunction，形成其他element2的shadowRoot

2 个答案: