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

我试图在Angular 2中的特定路线的导航栏中生成一段html。因此，这不是主体组件的一部分，而是页面标题中布局的一部分。我如何在angular 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'}

          }
      })

//header.html。。这是布局中的一部分




//routes.config.js
.state（'app.xyz'{
url:“/jobs/：jobID”，
观点：{
''：{标题：“abc”，
templateUrl:helper.basepath（'path/xyz.html'），
控制器：“myController”，
},
“导航栏选项”：{标题：“我的页面”，
templateUrl:helper.basepath（'path/xyz_navbar.html'），
控制器：'myController'}
}
})

---

我想在Angular 2中实现同样的效果，如果我理解正确，您试图在导航栏中基于某个路由显示组件，但是页面的主体也将随着路由更改而更新。如果我是你，我会使用“次要路线”。我相信它们也被称为“命名路线”

通常情况下，您的web页面如下所示：

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

如果您只更新web页面的一部分，这将非常有用。如果要更新多个部分，则需要提供多个路由并命名它们。它们看起来像这样：

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

我猜你会希望在导航栏中有一个命名路由器，然后你必须创建一个链接，将数据放置在命名路由中。。。该链接看起来像这样：

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

开通两条线路

非常接近我要找的东西。我是否可以通过路径直接访问此文件？i、 e.当我走到路线“/mymainroute”时，命名routeoutlet是作为页面加载本身的一部分加载的，而不是使用带有附加参数的按钮来检索我的命名出口。我不知道在不在routerLink中指定它们的情况下加载两个出口的任何方法。我会说使用嵌套路由，因为一个链接将加载一个路由，然后再加载一个子路由，但这似乎不起作用，因为嵌套路由在另一个模板中加载一个模板，并且您希望在网页的两个不同区域中使用模板。是-第二个问题是，我希望显示的路由器出口不在同一组件（父/子）级别。因此，我要添加的导航栏是布局文件的一部分，html文件的其余部分位于进一步加载子组件的模块内-因此，它成为另一个路由器出口（应用程序级）内的嵌套组件，因此，当我尝试从模块内生成链接时，它不理解名为router-outlet的布局级别。如果我在当前模块中添加名为router-outlet的布局级别，它会正确理解并生成组件，但这不是我要查找的。