仅使用角度2路由更改模板的一部分

Question

我有一个模板有三个部分，一个是顶部导航，后面是左侧导航，内容部分是右侧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>应该替换div中的HTM，内容的id不会这样做。相反，它抓取同一模板的所有HTML并将其放在<div class="col-md-9" id="content">Content goes here</div>内。为什么复制相同的模板是正常行为还是我的实现有问题？

Answer 1

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

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