Javascript 角度UI路由器-组件-父-子-嵌套-视图未加载

我有一个关于ui路由器和组件的问题。我已经从非基于组件的结构切换到基于组件的结构。 我喜欢它，它非常清晰，并且非常容易管理/处理资源，除了该死的路由过程。 我的应用程序非常复杂，有许多层模块和组件，如下所示：

应用程序

模块

- Layout
- LogicCode
- Config/Routing

Components
    ComponentA
        - Layout
        - LogicCode
        - Config/Routing

    ComponentB
        - Layout
        - LogicCode
        - Config/Routing

应用内布局是一个

<div ui-view="module" />

component.Config采用每个组件的路由，例如：

$stateProvider
// This is a list view e.g. for orders or something like that
.state({
    name: 'my_module.componentA',
    url: '/componentA',
    resolve: {
        //...
    },
    views: {
        'moduleContent': { component: 'componentAList' }
    }
})
// this should be the detail view (abstract cause it has many sub components)
.state({
    name: 'my_module.componentA.item',
    url: '/:itemId',
    views: {
        'moduleContent': { component: 'componentAItem' }
    },
    resolve: {
        // ...
    },
    abstract: true,
    redirectTo: 'my_module.componentA.item.general'
})
// this is the major item view
.state({
    name: 'my_module.componentA.item.general',
    url: '/',
    component: 'componentAItemGeneral'
})
// this is any other item view
.state({
    name: 'my_module.componentA.item.positions',
    url: '/',
    resolve: {
        // ...
    },
    component: 'componentAItemPositions'
});

如果我链接状态为“my_module”，一切正常，链接状态为“my_module.componentA”时也正常。 但是，如果我尝试链接“my_module.componentA.item”，则视图不会更改，组件的控制器工作正常 但这种观点没有改变。当我链接“my_module.componentA.item.general”或“my_module.componentA.item.positions”时也是如此。

---

问题在哪里？愿你能睁开我的眼睛-非常感谢

希望你现在已经解决了这个问题，但以防万一有人无意中发现了这个问题，想知道这里发生了什么

按照设置方式，您的状态“my_module.componentA.item”正试图在

ComponentList

的html中查找

，因为您当前将其指向其父级中的命名视图。如果您希望它这样做，您可能只需要将该视图添加到该组件的模板中

但是，在我看来，您希望它在

myu模块的html中查找
。为此，请将state
'my_module.componentA.item'
的状态声明中的
views
属性更改为

views: {
    'moduleContent@^.^': { component: 'componentAItem' }
},

或

这将告诉它在祖父母而不是父母的html中查找该名称的视图

$stateProvider
.state({
    // abstract: true,
    name: 'my_module',
    url: '/my_module',
    views: {
        'module': { component: 'my_module' }
    }
});

$stateProvider
// This is a list view e.g. for orders or something like that
.state({
    name: 'my_module.componentA',
    url: '/componentA',
    resolve: {
        //...
    },
    views: {
        'moduleContent': { component: 'componentAList' }
    }
})
// this should be the detail view (abstract cause it has many sub components)
.state({
    name: 'my_module.componentA.item',
    url: '/:itemId',
    views: {
        'moduleContent': { component: 'componentAItem' }
    },
    resolve: {
        // ...
    },
    abstract: true,
    redirectTo: 'my_module.componentA.item.general'
})
// this is the major item view
.state({
    name: 'my_module.componentA.item.general',
    url: '/',
    component: 'componentAItemGeneral'
})
// this is any other item view
.state({
    name: 'my_module.componentA.item.positions',
    url: '/',
    resolve: {
        // ...
    },
    component: 'componentAItemPositions'
});

views: {
    'moduleContent@^.^': { component: 'componentAItem' }
},

views: {
    'moduleContent@my_module': { component: 'componentAItem' }
},