如何访问 element1 的 shadowFunction 形成 polymer 2.0 中其他 element2 的 shadowRoot

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> 有 1 个名为 covert_data() 的方法。我正在尝试下面的代码。

方式 1:

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

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

方式2:

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

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

How to call that covert_data() method in <my-page2></my-page2> in polymer 2.0

Answer 1

在page1.html中：

this.dispatchEvent(new CustomEvent('upway-func', {detail: {op:"Optionally I can send some data"}}));

在 myApp.html 中定义子元素的 id 以便调用函数和 on-upway-func 事件：

  <my-app>
    <page1 on-upway-func="callPage2Func"></page1>
    <page2 id="child2"></page2>
</my-app>
...
callPage2Func(op){
    console.log(op)//Optionally I can send some data
    this.$.child2.covert_data(op);
}

Answer 2

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

Please make sure that you post a working piece of code.

自从我工作以来已经好几个月了 Polymer 我花了 15-20 分钟才让您的代码工作。在那 15-20 分钟里，我想过很多次离开它。

发布工作代码将有助于社区中的人们更好地帮助您。

现在开始解决

我在您的代码中发现了很多问题。不知道哪个是因为SO里面的代码写的不全，哪个是正版的，我都点一下。

script 缺少 my-app 的标签和注册。
constructor 和 Super 缺少所有元素。
template 缺少 shadowDom 的标签。

我不知道为什么你的 way 1 不工作，它对我来说工作正常。我只能猜测可能是因为缺少 constructor，但 way 2 将不起作用，并且 my-page1 不直接出现在 document 中。它是 my-app 的 shadowRoot 的一部分。

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

<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>

如何访问 element1 的 shadowFunction 形成 polymer 2.0 中其他 element2 的 shadowRoot

How to access shadowFunction of element1 form shadowRoot of other element2 in polymer 2.0

polymer-2.x