Angular 角形路由器插座是附加的，而不是替换整个组件

我试图在角度9中的两个组件之间建立一条路径

问题是，当我路由它时，会附加而不是替换整个组件

App-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BookComponent } from './components/book/book.component';


const routes: Routes = [

  { path: 'autorBuscado', component:BookComponent,pathMatch:'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

有什么想法吗？ 如果你需要更多的代码，告诉我

App.component.html

<router-outlet><h1>Autores</h1>
<div *ngFor='let autor of autores'>
  <tr>{{ autor["id"] }} {{ autor["firstName"] }} {{ autor["lastName"] }}</tr>
</div>

<form>
  <label for="autor">¿Que autor desea buscar?</label>
  <input name="autor" type="text" [(ngModel)]="autorBuscado">
  <input (click)="detalleAutor()" type="button" id="enviar" value="Buscar">
</form>

<h1>Libros</h1>
<div class="principal">
  <div *ngFor='let libro of libros'>
    <div class="libros">
      <img class="imagenLibro" src='assets/imagenes/{{libro.id}}.png' alt="aaaa">
      <p>Título: {{ libro["name"] }}</p>
    </div>
  </div>
</div>
</router-outlet>

Autores
{{autor[“id”]}{{autor[“firstName”]}{{autor[“lastName”]}}
你有汽车吗？
利布罗斯
蒂图罗：{{libro[“name”]}

创建一个新组件HomeComponent，其HTML内容如下所示

<h1>Autores</h1>
<div *ngFor='let autor of autores'>
  <tr>{{ autor["id"] }} {{ autor["firstName"] }} {{ autor["lastName"] }}</tr>
</div>

<form>
  <label for="autor">¿Que autor desea buscar?</label>
  <input name="autor" type="text" [(ngModel)]="autorBuscado">
  <input (click)="detalleAutor()" type="button" id="enviar" value="Buscar">
</form>

<h1>Libros</h1>
<div class="principal">
  <div *ngFor='let libro of libros'>
    <div class="libros">
      <img class="imagenLibro" src='assets/imagenes/{{libro.id}}.png' alt="aaaa">
      <p>Título: {{ libro["name"] }}</p>
    </div>
  </div>
</div>

---

当你点击路径：'时，你的路线在哪里？还有，

yeee…

来自哪里？我有来自BookComponent的yee，其中有book.component，html能否请您共享app.html的代码？请将

与其余代码分开。

<router-outlet></router-outlet>

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BookComponent } from './components/book/book.component';


const routes: Routes = [
  { path: '', component:HomeComponent,pathMatch:'full'},
  { path: 'autorBuscado', component:BookComponent,pathMatch:'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }