Datenbindung - Kommunikation zwischen zwei benutzerdefinierten Elementen in einem anderen benutzerdefinierten Element

Question

my-app ist ein benutzerdefiniertes Element, das zwei weitere benutzerdefinierte Elemente enthält, die miteinander kommunizieren müssen. Wenn ich auf eine Schaltfläche auf dem Kopfzeilenelement klicke, möchte ich das Schubladenelement öffnen/schließen. Ich versuche Datenbindungen für Messaging zu verwenden, aber ich kann es nicht zum Laufen bringen.

Ich denke, ich müsste dafür Eisensignale verwenden, aber ich würde gerne wissen, warum Datenbindung in diesem Zustand nicht funktioniert.

Parent Element - my-app

<dom-module id="my-app"> 
    <template> 
     <app-header-layout has-scrolling-region> 
      <my-header drawer-active="{{drawerState}}"></my-header> 
      <div id="main-content" class=""> 
       <div class="imgWrap"><img src="../images/banner.jpg"></img> 
       </div> 
      </div> 
      <my-drawer drawer-opened="{{drawerState}}"></my-drawer> 
     </app-header-layout> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-app', 
     properties: { 
      drawerState: { 
       type: Boolean, 
       value: false, 
       notify: true 
      } 
     } 
    }); 
    </script> 
</dom-module> 

Child Element - my-Header

<dom-module id="my-header"> 
    <template> 
     <app-header> 
      <app-toolbar> 
       <div class="logo"><img src="../images/logo.svg"></img> 
       </div> 
       <paper-icon-button icon="menu" on-tap="toggleDrawer"></paper-icon-button> 
      </app-toolbar> 
     </app-header> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-header', 
     properties: { 
      drawerActive: { 
       type: Boolean, 
       value: false, 
       notify: true 
      } 
     }, 
     toggleDrawer: function() { 

      this.drawerActive = !this.drawerActive; 
     } 
    }); 
    </script> 
</dom-module> 

Child Element - my-Schublade

<dom-module id="my-drawer"> 
    <template> 
     <app-drawer align="end" opened="{{drawerOpened}}"> 
      <paper-menu> ... </paper-menu> 
     </app-drawer> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-drawer', 

     properties: { 
      drawerOpened: { 
       type: Boolean, 
       value: false, 
       notify: true 
      } 
     } 

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

Answer 1

Das Problem wurde behoben. Es gab einen Importfehler von meiner Seite. Siehe Kommentare zu der Frage.