切换自定义元素 Polymer 中的纸张对话框

Question

在使用 Polymer 和 JavaScript 进行开发方面，我是一个相当新的人，我感觉我切换纸质对话框的方式不是最好的方式或者可以改进。目前我尝试从自定义元素外部调用 toggle() 函数，它对我有效，但我收到错误
我创建了一个名为 my-dialog 的自定义元素：

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

    <paper-dialog id="popUp" with-backdrop on-iron-overlay-opened="patchOverlay">
      <!-- Dialog content -->
      <h2>Hello World</h2>
    </paper-dialog>

  </template>

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

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

我现在想在我的一个页面上单击纸张时打开和关闭对话框 button.It 工作正常，但正如我上面提到的，我觉得这不是我正在做的事情那里。

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

    <paper-fab icon="create" id="myBtn" on-tap="toggleDialog"></paper-fab>        
    <my-dialog id="myDialog"></my-dialog>

  </template>

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

      //Open dialog
      toggleDialog: function() {
        var dialog = this.shadowRoot.querySelector('#myDialog');
        var popUp = dialog.shadowRoot.querySelector('paper-dialog');
        popUp.toggle();
      },
    });
  </script>
</dom-module>

错误消息。我正在进入我的控制台：

(program):5 Uncaught TypeError: Cannot read 属性 'removeAttribute' of null(anonymous function) @(program):5(anonymous function) @(program):20

如果有人能为我解决问题，那就太好了。也许给我提示我还能做什么。

Answer 1

你的第二个元素my-profile-view应该不知道你的第一个元素my-dialog的内部逻辑。

相反，您的客户对话框应该公开一个 public 方法（即 toggleDialog）。

我的-dialog.html <script>:

Polymer({
  is: 'my-dialog',
  toggleDialog: function () {
    this.$.popUp.toggle()
  }
});

您的第二个元素可以调用此方法。

我的个人资料-view.html <script>:

Polymer({
  is: 'my-profile-view',
  //Open dialog
  toggleDialog: function() {
    this.$.myDialog.toggleDialog()
  }
});

切换自定义元素 Polymer 中的纸张对话框

Toggle paper-dialog which is in a custom element Polymer

javascript

web-component

shadow-dom

polymer

paper-dialog