角度ui路由器不扩展父视图

Question

我想将父视图扩展到子视图。

我route.js

let view = { 
    '': { 
     templateUrl: '/app/content.html' 
    }, 
    'sidebar': { 
     templateUrl: '/app/sidebar.html' 
    } 
}; 
.state('profile', { 
    abstract: true, 
    url: '/profile', 
    views: view, 
    templateUrl: '/app/profile/profile.html' 
}) 
.state('profile.about', { 
    parent: 'profile', 
    url: '/about', 
    views: { 
     '': { 
      templateUrl: '/app/profile/about.html' 
     } 
    } 
}) 

我的index.html：

<div ui-view></div> 

我的个人资料/ profile.html：

//all other stuff (header, sidebar, etc) 
<div> 
    <h1>Profile</h1> 
    <div ui-view=""></div> 
</div> 

我的个人资料/ about.html：

<div> 
    <h1>About</h1> 
</div> 

一切工作完美，包括边栏。

问题是about.html显示页面，但它不扩展profile/profile.html页面。

任何解决方案？

这是plunker。

这是有点不同，但它是相同的，考虑如何route1没有显示，但显示test.html。

Answer 1

试试这个方法：

let view = { 
    '': { 
     templateUrl: '/app/profile/index.html' 
    }, 
    'content': { 
     templateUrl: '/app/content.html' 
    }, 
    'sidebar': { 
     templateUrl: '/app/sidebar.html' 
    } 
}; 
.state('profile', { 
    abstract: true, 
    url: '/profile', 
    views: view 
}) 
.state('profile.about', { 
    parent: 'profile', 
    url: '/about', 
    views: { 
     '': { 
      templateUrl: '/app/profile/about.html' 
     } 
    } 
})