Polymer 2.0嵌套铁页

Question

我对铁页和app-route不是很好，所以我会尽力解释这个问题。

我正在构建一个包含两个主要＆＃34;应用程序的Web应用程序。内置于其中 - 常规用户界面和管理仪表板。很自然地，我想要两个不同的主要路径＆＃39;：/admin和/home

管理信息中心应该有一个抽屉，我可以在其中选择一个＆＃39;类别列表＆＃39;选择类别后，加载特定视图。示例/admin/users将加载一个将加载用户列表的视图。点击列表页面上的项目后，打开详细信息部分。示例/admin/user/UserA

到目前为止，这是我的结构。 demo-app有铁页，包含HomePage和AdminPage。 AdminPage还有包含ListView和DetailView的铁页。

我可以进入管理页面，但是从“类别”列表中进行选择后，路线就无法启动。我将我的代码基于Shop Demo

演示应用

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

<iron-media-query query="max-width: 767px" query-matches="{{smallScreen}}"></iron-media-query>

<app-header role="navigation" id="header" effects="waterfall" condenses reveals>
  <app-toolbar>
  </app-toolbar>
</app-header>

<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
  <!-- home view -->
  <demo-home name="home"></demo-home>

  <!-- admin view -->
  <demo-admin name="admin"></demo-admin>

  <shop-404-warning name="404"></shop-404-warning>
</iron-pages>

演示管理

    <app-route
        route="{{route}}"
        pattern="/admin"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

    <h1>Admin</h1>
    <ul>
      <li><a href="/admin/users">Users</a></li>
      <li><a href="/admin/bars">Bars</a></li>
      <li><a href="/admin/stepsheets">Stepsheets</a></li>
      <li><a href="/admin/events">Events</a></li>
    </ul>

    <p>subroute: [[subroute]]</p>

    <iron-pages role="main" selected="{{subroute.path}}" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
      <demo-list name="list" route="{{subroute}}"></demo-list>
    </iron-pages>
  </template>

演示列表

<app-route
    route="[[route]]"
    pattern="/admin/:collection"
    data="{{routeData}}"></app-route>

<h1>Collection: [[routeData.collection]]</h1>

修改 我可能会做点什么......

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

然后

  static get observers() { return [
    '_routePageChanged(routeData.page)',
    '_routeCategoryChanged(subrouteData.category)'
  ]}

不确定这是否是正确的方法？如果我有一个包含3个以上子路径的网址，我觉得这会非常麻烦

编辑2

Answer 1

在demo-admin路由器中

<app-route
    route="{{route}}"
    pattern="/admin"
    data="{{routeData}}"
    tail="{{subroute}}">
</app-route>

可能无法正常工作，因为在demo-app内无法访问route的{​​{1}}属性。此外demo-admin也是多余的：如果正在加载patterm="/admin"，则网址已经是demo-admin。

您可以将/admin的{​​{1}}属性传递给需要解析子路径的子视图：

<强>演示app.html

demo-app

<强>演示admin.html

subroute

在<dom-module id="demo-app"> <template> <app-location route="{{route}}"></app-location> <app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"> </app-route> <iron-media-query query="max-width: 767px" query-matches="{{smallScreen}}"></iron-media-query> <app-header role="navigation" id="header" effects="waterfall" condenses reveals> <app-toolbar> </app-toolbar> </app-header> <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404"> <demo-home name="home"></demo-home> <demo-admin name="admin" route="{{subroute}}"></demo-admin> <shop-404-warning name="404"></shop-404-warning> </iron-pages> </template> <script> class DemoApp extends Polymer.Element { static get is() { return "demo-app"; } static get properties() { return { page: { type: String, reflectToAttribute: true, observer: '_pageChanged', }, routeData: Object, subroute: Object, }; } static get observers() { return [ '_routePageChanged(routeData.page)', ]; } _routePageChanged(page) { this.page = page || 'demo-home'; } // Use this only if you want to lazy load pages _pageChanged(page) { const resolvedPageUrl = this.resolveUrl('demo-' + page + '.html'); Polymer.importHref( resolvedPageUrl, null, this._showPage404.bind(this), true); } _showPage404() { this.page = '404'; } } customElements.define(DemoApp.is, DemoApp); </script> </dom-module> 的{​​{3}}中找到更多信息。