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

Question

I've question about ui-router and components. I've switched from non-component based structure to component based structure. I love it, it´s very clear and very easy to manage/handle the resources, excepts the damn routing process. my app is very very complex and has many layers of modules and components like this:

app

- Layout
- LogicCode

module

- Layout
- LogicCode
- Config/Routing

Components
    ComponentA
        - Layout
        - LogicCode
        - Config/Routing

    ComponentB
        - Layout
        - LogicCode
        - Config/Routing

in app.Layout is an

<div ui-view="module" />

element

in module.Layout an

<div ui-view="moduleContent" />

element

the module.Config takes the routing for the hole module eg:

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

the component.Config takes the routing for each component eg:

$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'
});

if I link state "my_module" everything works fine, also when link state "my_module.componentA" all fine. but if I try to link "my_module.componentA.item" the view will not change, the controller of the component works fine but the view doesn't change. the same when I link "my_module.componentA.item.general" or "my_module.componentA.item.positions". Where is the problem? May you can open my eyes - thanks a lot!

Answer 1

Hopefully you've already solved this by now, but just in case someone stumbles on this and wants to know what happened here...

The way you have it set up, your state 'my_module.componentA.item' is trying to look for a <div ui-view="moduleContent"></div> inside of the html of componentAList , because you're currently pointing it to a named view inside its parent. If you wanted it to do that, you may just need to add that view to that component's template.

However, it looks to me like you intended for it to look for the <div ui-view="moduleContent"></div> inside the html of my_module . To do that, change the views property in your state declaration for state 'my_module.componentA.item' to

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

or

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

This will tell it to look for a view of that name in the html of the grandparent rather than the parent.