0

当通过另一个组件发送的 dispatchEvent 调用它时，我无法打开纸质对话框。这会触发覆盖，但不会显示对话框。

我有以下组件设置：

  • 一个通用父组件，包含 2 个带有自定义子页面的铁页面，以及一个触发事件的侦听器
  • 第一个页面组件：它有一个触发自定义事件的按钮
  • 第二个页面组件：包含打开对话框的功能。

目标是通过调度的事件，从第一个子页面组件，这被父组件捕获，并在第二个页面组件上调用一个方法，打开一个纸质对话框。当事件在同一个组件上触发和捕获时，这可以正常工作，但在不同组件正在播放时则不行......纸质对话框没有打开。相反，只有背景被激活。

下面是一些代码片段（不完整以保持紧凑）：

1) 父组件，包含 2 个子组件并拥有一个监听器

<dom-module id="parent-comp">
<template>
//....
<div class="main-frame">
  <iron-pages id="pages" selected="[[state]]" attr-for-selected="state" fallback-selection="first">
    <child-page-component id="first" state="first"></child-page-component>
    <child-page-component id="second" state="second"></child-page-component>
  </iron-pages>
/....
<template>
//....

<script>
   class ParentPage extends Polymer.Element {
      // ... all needed stuff...

      ready(){
        super.ready();
        // LISTEN FOR event 'test-dialog' !!
        this.addEventListener('test-dialog', (e) => this._onTestEvent(e));
      }

      //...

      _onTestEvent(e){
         // When event is hit, call the second child method...
         this.$.second.callTestEvent();
      }
   }
   //....
 </script>

2）在第一个子组件中，有一个按钮触发了由父级捕获的dispatchEvent ...

  // ....

  <paper-button raised on-tap="_test">Test</paper-button>
  // ....
  <script>
      class ChildPageComponent extends Polymer.Element {
      //....
      _test(){
          // FIRE CUSTOM EVENT 'test-dialog'
          this.dispatchEvent(new CustomEvent('test-dialog', {
              bubbles: true, composed: true, detail: {}
          }));
      }
     //....

3)在第二个子组件中，有一个对话框定义，以及一个可以从父组件调用的函数。

  // ....
  <paper-dialog id="dialogtst" modal>
     <div>
        <h1>hello</h1>
     </div>
     <div class="buttons">
        <paper-button dialog-confirm>Close</paper-button>
     </div>
  </paper-dialog>
  // ....

  // ....
  <script>
      class ChildPageComponent extends Polymer.Element {

      //....
      callTestEvent(){
          // Open Dialog....
          this.$.dialogtst.open();  // SHOULD OPEN RIGHT??
      }
     //....

但如前所述，全屏被模态背景覆盖，并且不显示任何对话框。当通过按钮直接调用，在任何组件上，或者当事件被捕获在同一个组件中时，这一切都有效......但当它传递给父级时......

有人可以解释为什么以及如何让它工作吗？ 所有的建议都非常受欢迎！

4

0 回答 0