问

相同URL上的Angular UI-router默认状态

盧品澄_673 发布于 2023-01-19 11:20

路由器

这很难解释,但我会试试.

我在角度应用程序中使用UI路由器,并希望使用以下URL:

/contacts
/contacts/{id}

当您访问/ contacts页面时,它将从服务器获取联系人列表并显示它们.当你转到/ contacts/1时,它将从服务器获得联系人1记录并显示它.

我的代码目前看起来像这样:

.state('contacts', {
    url: "/contacts",
    templateUrl: "templates/contacts.tpl.html",
    controller: "ContactsCtrl"
})
.state('contacts.contact', {
    url: "/{contactID}",
    templateUrl: "templates/contact.tpl.html",
    controller: "ContactCtrl"
})

到现在为止还挺好.但是当你转到第二个URL时,父母也会被激活,所以它会去服务器获取联系人列表,即使它们没有显示,这也是一种浪费.

我可以将/ contacts设置为"abstract:true"并使用/ contacts/list作为第一个URL,但这不是我想要使用的URL,我确实需要在父级上设置一个控制器,因为我确实有一些我想要的逻辑放入父级(为该部分创建导航).

理想情况下,当用户点击/联系人时,我希望父状态激活(创建导航)并运行默认子状态以列出联系人而不重定向到另一个URL.如果用户转到/ contacts/8那么它仍将激活父状态而不是默认状态,因此它永远不会到服务器来获取联系人.

我希望这是有道理的.我无法创建一个plunkr,但是Angular UI人员亲切地创建了一个显示上面不完美解决方案的人.

http://plnkr.co/edit/gmtcE2?p=preview

1 个回答

我可以将/ contacts设置为"abstract:true"

这将是正确方法的一部分.父状态不应加载不适用于子项的数据,但您的状态树不必完全反映您的URL结构.例如:

.state('contacts', {
    abstract: true,
    url: "/contacts",
    /* Various other settings common to both child states */
})
.state('contacts.list', {
    url: "", // Note the empty URL
    templateUrl: "templates/contacts.tpl.html",
    controller: "ContactsCtrl"
})
.state('contacts.item', {
    url: "/{id}",
    templateUrl: "templates/contact.tpl.html",
    controller: "ContactCtrl"
})

2023-01-19 11:22 回答

手机用户2502892503

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签