Angular UI Router-子状态和父状态中的参数返回错误的模板

Angular UI-Router - parameters in child and parent state returning wrong template

本文关键字：状态 参数 返回 错误 Router- UI Angular      更新时间：2023-09-26

我有一个基于Angular和UI路由器的应用程序。我正在尝试获得以下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/categy会返回正确的模板，但/base/caCategory/id也会返回类别模板（我希望它返回id_view.html）。我可能想稍后添加更多的动态参数，所以我想要一个干净的解决方案。这是我目前的解决方法：

.state('base.id', {
    url: '/:catId/:id',
    templateUrl: 'views/id_view.html'
});

它可以工作，但UI路由器不会触发我菜单中的活动类。

谢谢你花时间读这篇文章，如果你能给我指明正确的方向，这对我有很大帮助！

上面有一个代码的工作示例

你的概念是可以的，只是要确定，父母有自己的孩子的位置：

<div ui-view></div>

因此，在我们的例子中，我将上述行添加到views/cat_view.html中。这是状态"base.cat.id"的父状态视图。这些链接现在正在工作：

<a href="#/base/category">
<a href="#/base/category/1">
<a href="#/base/category/22">

点击此处查看操作

相关文章：