2017-05-17 29 views
0

短手擊潰定義UI-路由器:
{ state:'index', url:'', controller:IndexController, templateUrl:'/index.html' },
{ state:'index.child', url:'/child', controller:ChildController, template:'<p>Child state</p>' }

/index.html
<div ui-view>some content<a ui-sref='index.child'>go to child</a></div>

當用戶點擊的鏈接通過 - UI視圖打開/關閉標籤之間的所有HTML contnent更改爲子狀態的內容

所有我想要的,代表了角2名兒童相同的邏輯路線

爲angular2我的路由器定義:
{ path:'', component: IndexComponent, children:[ { path:'child', component:ChildComponent } ] }

IndexComponent
@Component({ selector: 'index', templateUrl: './index.component.html', styleUrls: ['./index.component.css'] })

index.component.html
​​
<router-outlet>
<div>some content</div>
</router-outlet>

ChildComponent
@Component({ selector: 'child', template: '<div>child state</div>', styleUrls: ['./index.component.css'] })

當路由器鏈接點擊 - 我得到這個結果:
​​
<router-outlet>
<div>some content</div><div>child state</div>
</router-outlet>

但我想下一個結果:
​​
<router-outlet>
<div>child state</div>
</router-outlet>

路由器出口didnt更換內容UI路由器沒有,也可以通過使沒有嵌套狀態治癒,但由於某些原因,我想在嵌套狀態此功能。任何建議?嵌套狀態<ui-view>之間邏輯和差 - UI-路由器和<路由器出口> - 路由器模塊指令在angularjs

回答

1

使用這樣的事情應該工作:

{ 
    path:'', 
    component: IndexComponent, 
    children:[ 
      { 
      path: '', 
      component:DefaultChildComponent 
      }, 
      { 
      path:'child', 
      component:ChildComponent 
      } 
    ] 
} 

DefaultChildComponent將有<div>some content</div>作爲它的模板。

內容將永遠不會放在router-outlet中。總是在它旁邊。