Angular ui-router: 1 url 同时触发父子状态

问题描述

当我转到 url /blog/post/edit 时，会触发 2 个 xhr 请求，如下图所示.

When I go to the url /blog/post/edit, 2 xhr requests trigger, as you can see in the image below.

这是我定义路由的方式:

This is how I have defined the routes:

$stateProvider
    .state('blog', {
        url: '/blog',
        templateUrl: '/blog'
    })
    .state('blog.post', {
        url: '/post',
        template: '<ui-view></ui-view>',
        abstract: true
    })
    .state('blog.post.edit', {
        url: '/edit',
        templateUrl: '/blog/post/edit'
    });

谁能帮我弄清楚为什么会这样?

Can anyone help me figuring out why this is happening?

推荐答案

正如评论中快速讨论的，ui-router 的本质是工作 这样.显示嵌套状态及其父状态

As quickly discussed in comments, the nature of the ui-router is to work this way. To show nested states with their parent states

最好的思考方式是折叠 TreeView:

• 如果我们想看到一个叶子(或任何非根节点)，我们必须看到/加载它的父节点、祖父节点......以及根节点.
• 但是一旦我们想看到一个兄弟，我们就不必重新加载所有的父级到根级的结构......它已经在起作用了

• if we want to see a leaf (or any not root node) we have to see/load its parent, grand-parent ... and the root as well.
• but once we want to see a sibling, we do not have to reload all the parent-to-root structure... is is already in play

ui-router 就是这样设计的.

这篇关于Angular ui-router: 1 url 同时触发父子状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！