仅使用 Angular 2 路由更改模板的一部分答案

【问题标题】：changing only one part of the template with angular 2 routing仅使用 Angular 2 路由更改模板的一部分
【发布时间】：2016-09-17 21:28:51
【问题描述】：

我有一个包含三个部分的模板，一个是顶部导航，然后是左侧导航，内容部分是右侧 div 或元素

<nav>top navs goes here </nav>
<div class="container>
<div class="row">
<div class="col-md-3" id="left-nav">
left navs goes here
</div>
<div class="col-md-9" id="content">
  <!--Content goes here-->
  <router-outlet></router-outlet>
</div>
</div>

我现在遇到的问题是 <router-outlet></router-outlet> 应该用内容 id 替换 div 内的 HTM 没有这样做。相反，它会抓取同一模板的所有 HTML 并将其放在 <div class="col-md-9" id="content">Content goes here</div> 中。为什么重复相同的模板是正常行为还是我的实现有问题？

【问题讨论】：

标签： javascript angularjs angular angular2-routing

【解决方案1】：

如果您只更改页面的一部分，一个路由器插座就足够了。在router-outlet所在的地方，注入组件。 注入的组件由您的路由配置定义。
也改一下：

<div class="col-md-9"> id="content"> 
to 
<div class="col-md-9" id="content">

【讨论】：