Question

我在设置应用导航时遇到问题。由于某种原因，我设置的路由器插座即使在点击另一个组件的路由器链接之后仍然显示组件，它只是在另一个组件之后显示它们并且如果我一直点击链接表（这就是我的组件是什么）只是显示一个更多时间在观点上。

这是我的副手：

<ul id="sideNav"  class="side-nav">
  <li>
<div class="square " id="logoContainer">
  <img src="../../assets/img/{{brand}}Logo.jpg" id="logo" class="backImg">
</div>
</li>
<li><a routerLink="/admRegiones">Inicio<i class="material-icons">home</i></a>
</li>
<ul class="collapsible collapsible-accordion">
<li>
  <a class="collapsible-header">Regiones<i class="material-icons" style="padding-left: 15px">terrain</i></a>
  <div class="collapsible-body">
    <ul>
      <li><a routerLink="/admRegiones" class="waves-effect waves-blue"><i class="material-icons right" style="padding-left: 10px">add_location</i>  Administrar regiones  </a></li>
    </ul>
  </div>
</li>
</ul>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
  <li>
    <a class="collapsible-header">Locaciones<i class="material-icons" style="padding-left: 15px">map</i></a>
    <div class="collapsible-body">
      <ul>
        <li><a routerLink="/buscarLocacion"  class="waves-effect waves-blue"><i class="material-icons right" style="padding-left: 10px">location_searching</i>Ir a locación </a></li>
        <li><a routerLink="/admLocaciones"  class="waves-effect waves-blue"><i class="material-icons right" style="padding-left: 10px">add_location</i>  Administrar locaciones  </a></li>
      </ul>
    </div>
  </li>
</ul>
</li>
</ul>

这是我的路线：

RouterModule.forRoot([
  {
    path: 'admLocaciones',
    component: AdmLocacionesComponent
  },
  {
    path: 'buscarLocacion',
    component: BuscarLocacionComponent
  },
  {
    path: 'admRegiones',
    component: AdmRegionesComponent
  }
])

这里显示的组件（admRegiones和admLocaciones几乎相同）：

<div class="container col s8"style="padding-top: 4%;">
<a href="#modalNuevaLocacion" class="waves-effect waves-light btn modal-trigger" (click)="openModal(); exportedInitialize();">Modal</a>  <table class="highlight striped center" id="tablaLocaciones" onload="loadTablaLocaciones()">
<hr>
<thead>
<tr>
  <th>ID</th>
  <th>Nombre</th>
  <th>Región</th>
  <th>Editar</th>
  <th>Eliminar</th>
</tr>
</thead>
<tbody id="locacionesBody">
</tbody>
</table>
</div>

这是我的app-component模板：

<app-header></app-header>

<div id="body">
<router-outlet></router-outlet>
</div>
<app-locacion></app-locacion>
<app-side-nav></app-side-nav>

路由器插座显示多个组件

0 个答案: