角度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' 
     } 
    } 
})