Question

我正在尝试使用app-router元素替换屏幕上的组件，但它不会渲染任何内容。以下是详细信息。

＆＃34; my-element.html ＆＃34;中有两个主要元素。一个是侧栏，另一个是主面板。我想根据路线用适当的元素替换主面板。但是，它不会渲染任何元素，只会修改网址。

请帮忙

MY-element.html

<dom-module id ="my-element">
<template> 

<paper-drawer-panel id="drawerpanel">

  <aq-sidebar></aq-sidebar>

  <app-router div="app-router" mode="hash">
    <app-route path="/editor" import="../layouts/editor.html"></app-route>
    <app-route path="/analyze" import="../layouts/analyze.html"></app-route>
    <app-route path="/community" import="../layouts/community.html"></app-route>
  </app-router> 

</paper-drawer-panel>
</template>
<script>
 Polymer({ is:'my-element',
           listeners: {'change-menu': 'menuChanged',},
           menuChanged(newMenu) { this.$$('app-router').go("/editor", {replace:true});}
        })
</script> </dom-module>

AQ-sidebar.html

<dom-module id='aq-sidebar'>
<template>
 <paper-header-panel class='sidenav fit'>
  <paper-toolbar>
    <div class="title">AimsQuant</div>
    <paper-icon-button icon="icons:menu" on-tap="toggleMenu"></paper-icon-button>
  </paper-toolbar>
  <paper-menu attrForSelected="data-panel" iron-select="onSelected">
    <paper-icon-item noink  data-panel="editor">
      <iron-icon item-icon icon="vaadin-icons:twin-col-select"></iron-icon>
      <span class="item-text">Editor</span>
      <!--a is="pushstate-anchor" href="#/editor"></a-->
    </paper-icon-item>

    <paper-icon-item data-panel="analyze">
      <iron-icon item-icon icon="vaadin-icons:chart"></iron-icon>
      <span class="item-text">Analyze</span>
    </paper-icon-item>

<script> Polymer({
    is: 'aq-sidebar',

    listeners: {
      'iron-select': 'onSelected',
    },

    onSelected() {
      this.fire('change-menu', {menu : this.menuSelected})
    },


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

Answer 1

首先，这种导入方式很奇怪，我认为如果你使用铁选择器在你制作的视图组件之间切换，然后使用importHref函数导入它也是正确的，你也应该使用聚合物的Set函数改变路径而不是Go函数。像这样：

<app-location route="{{ route }}"></app-location>
<app-route route="{{ route }}"
           pattern="/:page"
           data="{{ routeData }}"
           tail="{{ subroute }}"></app-route>

<iron-pages role="main"
            attr-for-selected="route"
            selected="[[ page ]]">
    <my-editor route="editor"></my-editor>
    <my-analyze route="analyze"></my-analyze>
    <my-community route="community"></my-community>
</iron-pages>

<script>
     Polymer({ 
         is:'my-element',
         properties: {
             page: {
                 type: String,
                 notify: true,
                 reflectToAttribute: true,
                 observer: "_pageChanged"
             }
         },

         observers: [
             "_routePageChanged(routeData.page)"
         ],

         _changeRoute: function(e) {
             this.importHref(
                this.resolveUrl("my-" + e.detail.requestRoute), null, null, true);
             this.set("route.path", e.detail.requestRoute);
         },

         _routePageChanged: function(page) {
             this.page = page || "list";
         },
     })
</script>

app-router＆＃34; go＆＃34;不渲染：聚合物

1 个答案: