如何在角度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中产生布局文件中的子模板（组件）？

回答

相关问题