Angular router-outlet是附加的而不是替换整个组件

Question

我正在尝试在Angular 9中的两个组件之间建立一条路由。

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

Main page

​

​

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>

Answer 1

创建一个新的组件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>

将App.component.html更改为

<router-outlet></router-outlet>

将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: '', component:HomeComponent,pathMatch:'full'},
  { path: 'autorBuscado', component:BookComponent,pathMatch:'full'}
];

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