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

Question

我正在尝试将一段 html 生成到 Angular 2 中特定路线的导航栏中。所以这不是正文组件的一部分，而是页面标题中布局的一部分。我如何在角度 2 中做到这一点？ 这就是我在 AngularJS 中所做的。

//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'}

          }
      })

我想在 Angular 2 中实现同样的目标

Answer 1

如果我对您的理解正确，您正在尝试根据某个路线在导航栏中显示一个组件，但页面的主体也会随着路线的变化而更新。如果我是你，我会使用“次要路线”。我相信它们也被称为“命名路线”

通常，您的网页应该是这样的：

<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>