Question

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

应用

- Layout
- LogicCode

模块

- Layout
- LogicCode
- Config/Routing

Components
    ComponentA
        - Layout
        - LogicCode
        - Config/Routing

    ComponentB
        - Layout
        - LogicCode
        - Config/Routing

app.Layout中的

是

<div ui-view="module" />

元素

in module.Layout an

<div ui-view="moduleContent" />

元素

module.Config采用孔模块的路由，例如：

$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'正在尝试在<div ui-view="moduleContent"></div>的html中查找componentAList，因为您当前正在将其指向命名查看其父级内部。如果您希望它这样做，您可能只需要将该视图添加到该组件的模板。

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

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

或

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

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

Angular UI-Router - Component - Parent - Child - Nested - View not load

1 个答案: