как загрузить новый компонент, заменив существующий компонент в угловом маршрутизаторе

Question

У меня есть компонент customerList, в котором я получаю данные из службы и обрабатываю их. В каждой строке, если я нажимаю на любое имя, я пытаюсь отобразить новый компонент CustomerDetail с другим заголовком и содержимым. Я могу загрузить компонент CustomerDetail, но он находится ниже компонента customerList.

Я пытался решить с помощью маршрутизации, это не происходит

app.component.html

---

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<customer-list></customer-list>
<router-outlet></router-outlet>

customerList.component.html

---

<mat-cell *matCellDef="let customer">
              <nav>
                <a href routerLink="/customer" routerLinkActive="true" (click)="onSelect(customer)">{{customer.customerName}}</a>
              </nav>
        </mat-cell>

customerList.component.ts

---

 onSelect(customer){
    console.log('onSelect method calls');
    console.log(customer);
    this.router.navigate(['/customer',customer.customerName]);
  }

приложение-routing.module.ts

---

const routes: Routes = [
  { path: 'home', component: CustomerListComponent },
  {path:'customer/:customerName', component : CustomerDetailComponent}
];

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

Answer 1

Вы должны удалить <customer-list> из вашего app.component.html

Добавить маршрут для всех сообщений:

const routes: Routes = [
  { path: 'home', component: CustomerListComponent },
  { path:'customer/:customerName', component : CustomerDetailComponent},
  // Add this route
  { path: '**', redirectTo: 'home' }
];    

Кроме того, измените ссылку на:

 <a [routerLink]="['/customer', customer.customerName]">{{customer.customerName}}</a>