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

Question

我对ui路由器和组件有疑问。 我已经从基于非组件的结构切换到基于组件的结构。 我喜欢它，除了该死的路由过程外，它非常清楚而且易于管理/处理资源。 我的应用程序非常复杂，并且具有许多类似的模块和组件层：

应用

- Layout
- LogicCode

模

- Layout
- LogicCode
- Config/Routing

Components
    ComponentA
        - Layout
        - LogicCode
        - Config/Routing

    ComponentB
        - Layout
        - LogicCode
        - Config/Routing

在app.Layout是一个

<div ui-view="module" />

元件

在module.Layout一个

<div ui-view="moduleContent" />

元件

该模块。配置为孔模块进行路由，例如：

$stateProvider
.state({
    // abstract: true,
    name: 'my_module',
    url: '/my_module',
    views: {
        'module': { component: 'my_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”时，情况相同。 问题出在哪儿？ 愿你睁开我的眼睛-非常感谢！

Answer 1

希望您现在已经解决了这个问题，但是以防万一有人偶然发现这个问题并想知道这里发生了什么...

设置方式，状态'my_module.componentA.item'试图在componentAList的html内查找<div ui-view="moduleContent"></div> ，因为您当前正在指向它到其父级内部的命名视图。 如果您希望这样做，则可能只需要将该视图添加到该组件的模板中即可。

但是，在我看来，您想要在my_module的html内查找<div ui-view="moduleContent"></div> 。 为此，将状态声明'my_module.componentA.item'状态声明中的views属性更改为

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

要么

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

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