如何在聚合物2中使用app-route来获得深层路径?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在聚合物2中使用app-route来获得深层路径?相关的知识,希望对你有一定的参考价值。
这是聚合物应用入门套件代码的一部分。我刚刚在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
谢谢你的帮助。
您应该像“铁页”一样在“铁页”中声明“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时,铁页面将知道要显示的组件。
但。您的解决方案中有一些棘手的部分:
- 请注意如何将子路由传递给子组件,以将内部路由机制与其所在的实际URL路径分离。
- 入门套件使用延迟加载来导入组件,在该函数内部,它将前缀'my-'添加到实际路径'news-view'。这就是加载的结果组件名称变为'my-news-view'的方式。这可能会引起混淆。
你可以阅读更多关于这个polymer shop case study。
PS:我个人认为聚合物样本应用程序路由工作的方式很混淆,因为它看起来像Web服务器静态名称解析(基于组件名称,而不是组件属性'name'),但事实并非如此。
您应该在组件内添加组件,然后使用子路由来知道id
试试dna-router
。它现在与Polymer 2.0项目兼容。
请按照这个答案 - https://stackoverflow.com/a/31236817/5069120
或者访问https://github.com/Saquib764/dna-router
以上是关于如何在聚合物2中使用app-route来获得深层路径?的主要内容,如果未能解决你的问题,请参考以下文章