Angular锚点点击路由无响应，Orders组件无法显示求助

我是Angular新手，正在学习路由功能。当前遇到的问题是：点击客户名称时，希望跳转到Orders组件并展示对应内容，悬停时浏览器底部能显示正确路由（如orders/3），但点击后无法加载Orders组件。

现有组件结构：包含CustomerList子组件的Customers组件、Orders组件，相关代码如下：

相关代码片段 #

1. order-routing.module.ts（路由绑定） #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { OrderComponent } from './order.component';

const routes: Routes = [
    { path: 'orders/:id', component: OrderComponent }
];

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

}

2. customer-list.component.html（routerLink绑定） #

<table class="table table-hover">
    <thead>
        <tr>
            <th (click)="sort('name')">Name</th>
            <th (click)="sort('city')">City</th>
            <th (click)="sort('orderTotal')">Order Total</th>
        </tr>
    </thead>
    <tr *ngFor="let cust of filteredCustomers">
        <td>
            <a [routerLink]="['/orders', cust.id]">
                {{ cust.name | capitalize }}
            </a>
        </td>
        <td>{{ cust.city }}</td>
        <td>{{ cust.orderTotal | currency:currencyCode:'symbol'}}</td>
    </tr>
    <tr *ngIf="filteredCustomers && filteredCustomers.length">
        <td colspan="2">&nbsp;</td>
        <td>
            {{ customersOrderTotal | currency:currencyCode:'symbol'}}
        </td>
    </tr>
    <tr *ngIf="!filteredCustomers || !filteredCustomers.length">
        <td colspan="4">No customers found</td>
    </tr>
</table>

3. app.module.ts（模块导入） #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CoreModule } from './core/core.module';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomerModule } from './Customer/customer/customer.module';
import { SharedModule } from './Shared/shared.module';
import { OrdersModule } from './Orders/order/order.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CustomerModule,
    OrdersModule,
    SharedModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. app-routing.module.ts（主路由配置） #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: '/customers'},
{ path: '**', pathMatch: 'full', redirectTo: '/customers' }
];


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

排查方向及解决办法 #

1. 确认OrdersModule是否导入了路由模块 #

独立的路由模块需要被所属功能模块导入才能生效，检查OrdersModule（一般是order.module.ts）是否引入了OrdersRoutingModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrderComponent } from './order.component';
import { OrdersRoutingModule } from './order-routing.module';

@NgModule({
  declarations: [OrderComponent],
  imports: [
    CommonModule,
    OrdersRoutingModule // 必须添加这一行
  ]
})
export class OrdersModule { }

2. 检查根组件是否包含<router-outlet> #

路由组件的内容需要通过<router-outlet>标签渲染，确认app.component.html中存在该标签：

<router-outlet></router-outlet>

3. 临时注释通配符路由测试 #

主路由中的**通配符会匹配所有未定义的路由并跳转到/customers，如果orders/:id路由未被正确注册，会触发这个重定向。可以临时注释该路由验证：

const routes: Routes = [ 
  { path: '', pathMatch: 'full', redirectTo: '/customers'},
  // { path: '**', pathMatch: 'full', redirectTo: '/customers' }
];

4. 启用路由调试模式 #

在主路由模块中开启调试日志，查看路由匹配过程：

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

打开浏览器控制台，查看路由跳转时的日志，确认orders/:id是否被正确匹配。

内容的提问来源于stack exchange，提问作者nikita jd