如何在角度2中產生布局文件中的子模板（組件）？

我想在Angular 2中的特定路由的導航欄中生成一段html。所以這不是body部分的一部分，而是頁面標題中佈局的一部分。我如何在角度2中做到這一點？這就是我在AngularJS中所做的。如何在角度2中產生布局文件中的子模板（組件）？

//header.html .. which is a partial within the layout 

<div class="nav-wrapper"> 
     <ul class="nav navbar-nav" ui-view="navbar_options"> 
     <li> 

      <a href="" trigger-resize="" ng-click="app.layout.isCollapsed = !app.layout.isCollapsed" class="hidden-xs"> <em class="fa fa-navicon"></em> 
      </a> 

      <a href="" ng-click="app.asideToggled = !app.asideToggled" class="visible-xs sidebar-toggle"> <em class="fa fa-navicon"></em> 
      </a> 
     </li> 

    </ul> 
</div> 





//routes.config.js 

.state('app.xyz', { 

      url: '/jobs/:jobID', 
      views:{ 
      '': {title: 'abc', 
      templateUrl: helper.basepath('path/xyz.html'), 
      controller: 'myController', 
      }, 
      'navbar_options': {title: 'my_page', 
      templateUrl: helper.basepath('path/xyz_navbar.html'), 

      controller: 'myController'} 

      } 
     })

我想達到相同的角2

來源

2017-04-19 Venomoustoad

如果我理解正確的話，你想顯示在基於一定的路線導航欄的組成部分，但頁面的主體是也將更新路線變化。如果我是你，我會使用「次要路線」。我相信他們也被稱爲「命名路由」

通常情況下，你的網頁會是這樣的：

<div class="app-content"> 
    <router-outlet></router-outlet> 
</div>

這如果要更新只有一個網頁中的一部分的偉大工程。如果您想更新多個部分，則需要提供幾條路線並命名。他們是這樣的：

<router-outlet name="myroute"></router-outlet>

我猜你會想在你的導航欄這些命名路由器中的一個，然後你必須創造哪些地方在指定的路線數據的鏈接...該鏈接會看起來像這個：

<button md-button [routerLink]="['/mainroute', {outlets: {'myroute': ['routnamehere']}}]"> 
    Open Two Routes 
</button>

來源

2017-04-19 15:46:06 birwin

非常接近我在找什麼。無論如何，我可以通過一條路徑直接訪問它嗎？即當我進入路由'/ mymainroute'時，命名的routeoutlet作爲頁面加載本身的一部分加載，而不是使用具有附加參數的按鈕來檢索我命名的插件。 – Venomoustoad

我不知道有什麼方法可以加載兩個插座，而無需在routerLink中指定它們。 – birwin

我會說使用一個嵌套的路線作爲一個鏈接將加載一個路線，然後一個子路線，但它似乎不會工作，因爲嵌套的路線加載一個模板在另一個，它看起來你想模板在你的兩個不同的區域網頁。 – birwin

如何在角度2中產生布局文件中的子模板（組件）？

回答

相關問題