我有一个基于 Angular 和 UI-Router 的应用程序。我正在尝试获取以下 URL 结构
/base/category
/base/category/id
同时为每条路线提供不同的模板。
我进行了很多搜索,但找不到任何对我有帮助的东西。
我的代码:
$stateProvider
.state('app', {
url: '',
templateUrl: 'views/app.html',
abstract: true
})
.state('base', {
url: '/base',
template: '<div ui-view></div>',
abstract: true,
parent: 'app'
})
.state('base.cat', {
url: '/:catId',
templateUrl: 'views/cat_view.html'
})
.state('base.cat.id', {
url: '/:id',
templateUrl: 'views/id_view.html'
});
访问/base/category 返回正确的模板,但/base/category/id 也返回类别模板(我希望它返回 id_view.html)。我可能想稍后添加更多动态参数,所以我想要一个干净的解决方案。 这是我目前的解决方法:
.state('base.id', {
url: '/:catId/:id',
templateUrl: 'views/id_view.html'
});
它可以工作,但 UI 路由器不会触发我菜单中的事件类。
感谢您花时间阅读本文,如果您能为我指明正确的方向,这对我很有帮助!
最佳答案
有a working example与上面的代码
你的概念没问题,只要确定,父项有其子项的位置:
<div ui-view></div>
因此,在我们的例子中,我将上述行添加到 views/cat_view.html
中。这是状态“base.cat.id”的父状态 View 。这些链接现在可以使用:
<a href="#/base/category">
<a href="#/base/category/1">
<a href="#/base/category/22">
实际检查 here
关于javascript - Angular UI-Router - 子状态和父状态中的参数返回错误的模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34183631/