如何在不显示根组件的情况下路由组件

Question

const routes: Routes = [
{path:'candidate', component: SearchbyNameComponent}];


CandidateList.component.html

<div class="Candidates">
  <table class="list" cellpading="0" cellspacing="0">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Department</th>
      <th>JoiningDate</th>
    </tr>
  <tr *ngFor="let data of candidate_data">
    <td>{{data.id}}</td>
    <td>{{data.name}}</td>
    <td>{{data.department}}</td>
    <td>{{data.joining_date | date}}</td>
  </tr>
  </table>
  <div class="list-group">
    <h1>Filters</h1>
    <a [routerLink]="['/candidate']">Search by Name</a>
    <a href="#" class="list-group-item" >Search by Exp</a>
    <a href="#" class="list-group-item" >Delete</a>
  </div>
  </div>

App.component.html
<app-candidatelist></app-candidatelist>
<router-outlet></router-outlet>

点击Search by Name超链接时，URL会发生变化，但SearchByNameComponent会加载到app.component.html内容下面。如何在单击时只显示SearchbyNameComponent而不显示全部内容？target=_blank没有帮助。

Answer 1

您应该有另一条路由:{path：“,component：CandidateListComponent}]；并且在app.component.html中只保留 并删除 。如果您有上面的路由，当您单击”按名称搜索“超链接时，将首先呈现candidateList，然后才会在 上呈现与此新路由关联的组件。