Question

这是聚合物应用入门套件代码的一部分。我刚刚在src：

中为元素添加了my-news-list.html

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

<app-drawer-layout fullbleed>
  <!-- Drawer content -->
  <app-drawer id="drawer" slot="drawer">
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="news" href="/news">News</a>
      <a name="view1" href="/view1">View One</a>
    </iron-selector>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout has-scrolling-region>

    <app-header slot="header" condenses reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
        <div main-title>My App</div>
      </app-toolbar>
    </app-header>

    <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="view404"
        role="main">
      <my-news-list name="news" route="{{subroute}}"></my-news-list>
      <my-view1 name="view1"></my-view1>
      <my-view404 name="view404"></my-view404>
    </iron-pages>

  </app-header-layout>
</app-drawer-layout>

在<my-news-list>点击主题时，一切正常，<my-view1>和<iron-selector>正确加载。在<my-news-list>元素中，我获得了<iron-ajax>所有新闻的列表，并且工作正常：

<iron-ajax auto url="localhost/api/news/news" handle-as="json" last-response="{{newsList}}"></iron-ajax>
<template is="dom-repeat" items="{{newsList}}">
    <a href="/news/[[item.id]]">[[item.title]]</a>
</template>

我还有另一个用于查看单个新闻内容的元素，名为<my-news-view>我想在<my-news-list>点击每个新闻的标题时加载它。在点击路径上更改为：localhost：8081：/ news / 2正确但<my-news-list>元素再次加载而不是<my-news-view>。

我不粘贴其他元素代码（绑定，...）。

现在我想知道如何配置<app-route>并使用子路由在此路径中包含加载元素：

// For News
/news                     //all news list. loads my-news-list element
/news/12                  //news[12] view. loads my-news-view elemnt
/news/categories          //all categories list view. loads my-news-categories element
/news/categories/3        //category[3] news list view. loads my-news-category element

// and jobs similar to module
/Jobs
/jobs/country/cityName
/jobs/country/cityName/featured

感谢您的帮助。

Answer 1

您应该像“铁页”一样在“铁页”中声明“my-news-view”组件：

 <iron-pages selected="[[page]]" attr-for-selected="name"
    fallback-selection="view404" role="main">
  <my-news-view name="news-view" route="{{subroute}}" />
</iron-pages>

因此，当用户根据名称属性而不是组件名称本身导航到/ news-view / 12时，铁页面会知道要显示的组件。

BUT。您的解决方案中有一些棘手的部分：

请注意如何将子路径传递给子组件以将其内部解耦路由机制来自它所在的实际url路径。
入门套件使用延迟加载来导入组件，在该函数内部，它将前缀'my-'添加到实际路径'news-view'。这就是加载的结果组件名称变为'my-news-view'的方式。这可能会引起混淆。

您可以阅读有关此polymer shop case study的更多信息。

Answer 2

您应该在组件内添加组件，然后使用子路由来了解

的ID

Answer 3

试试dna-router。它现在与Polymer 2.0项目兼容。

请按照此回答 - https://stackoverflow.com/a/31236817/5069120

或访问https://github.com/Saquib764/dna-router

如何在聚合物2中使用app-route来获得深层路径？

3 个答案: