时间戳

首页 > 解决方案 > 如何通过替换角路由器中的现有组件来加载新组件

angular - 如何通过替换角路由器中的现有组件来加载新组件

问题描述

我有 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]);
  }

应用程序路由.module.ts

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

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

标签： angularangular6angular-routingangular-router

解决方案

您必须<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>

推荐阅读