Angular项目app.component.html中routerLink路由链接失效问题

我在开发电商分类商品展示的Angular项目时遇到以下问题：侧边栏的routerLink链接点击后完全无反应，但手动在浏览器地址栏输入对应路径（如/category/1）却能正常加载对应分类的商品列表，且项目编译无报错。

相关代码片段 #

侧边栏模板代码 #

<div class="page-wrapper">

  <!-- MENU SIDEBAR-->
  <aside class="menu-sidebar d-none d-lg-block">
    <div class="logo">
      <a href="#">
        <img src="assets/images/logo.png" alt="luv2shop" class="img-responsive">
      </a>
    </div>
    <div class="menu-sidebar-content js-scrollbar1">
      <nav class="navbar-sidebar">
        <ul class="list-unstyled navbar-list">
          <li>
            <a routerLink="/category/1" routerLinkActive="active-link">Books</a>
          </li>
          <li>
            <a routerLink="/category/2" routerLinkActive="active-link">Coffee Mugs</a>
          </li>
        </ul>
      </nav>
    </div>
  </aside>
  <!-- END MENU SIDEBAR-->

  <div class="page-container">
    <!-- HEADER DESKTOP-->
    <header class="header-desktop">
      <div class="section-content section-content-p30">
        <div class="container-fluid">
          <div class="header-wrap">
            <form class="form-header" onsubmit="return false;" method="GET">
              <input class="au-input au-input-xl" type="text" name="search" placeholder="Search for data ..." />
              <button class="au-btn-submit" type="submit">
                Search
              </button>
            </form>
            <div class="cart-area d-n">
              <a href="shopping-detail.html">
                <div class="total">19.22 <span> 2</span> </div> <i class="fa fa-shopping-cart" aria-hidden="true"></i>
              </a>
            </div>
          </div>
          <div class="account-wrap"></div>
        </div>
      </div>
    </header>
    <!-- END HEADER DESKTOP-->

    <!-- MAIN CONTENT-->
    <router-outlet></router-outlet>

  </div>
</div>

<!-- ENDS PAGE CONTAINER -->

<footer>
  <ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Help</a></li>
  </ul>
</footer>

ProductService 代码 #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Product } from '../common/product';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private baseUrl = 'http://localhost:8080/api/products';
  constructor(private httpClient: HttpClient) { }

  getProductList(theCategoryId: number): Observable<Product[]> {
    const searchUrl = `${this.baseUrl}/search/findByCategoryId?id=${theCategoryId}`;
    return this.httpClient.get<GetResponse>(searchUrl).pipe(
      map(response => response._embedded.products)
    );
  }
}
interface GetResponse{
  _embedded: {
    products: Product[];
  }
}

ProductListComponent 代码 #

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../../services/product.service';
import { Product } from '../../common/product';
import { CommonModule } from '@angular/common';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-list',
  imports: [CommonModule],
  templateUrl: './product-list-grid.component.html',
  styleUrl: './product-list.component.css'
})
export class ProductListComponent implements OnInit{
  products: Product[] = [];
  currentCategoryId: number = 1;

  constructor(private productService: ProductService,
              private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(() => {
      this.listProducts();
    });
  }

  listProducts() {
    const hasCategoryId: boolean = this.route.snapshot.paramMap.has('id');
    if (hasCategoryId) {
      this.currentCategoryId = +this.route.snapshot.paramMap.get('id')!;
    } else {
      this.currentCategoryId = 1;
    }
    this.productService.getProductList(this.currentCategoryId).subscribe(
      data => {
        this.products = data;
      }
    );
  }
}

问题排查与解决方案 #

1. 检查路由配置是否正确 #

确认根路由模块（如AppRoutingModule）中已配置/category/:id的路由规则，否则routerLink无法匹配到对应组件：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';

const routes: Routes = [
  { path: 'category/:id', component: ProductListComponent },
  { path: '', redirectTo: '/category/1', pathMatch: 'full' },
  { path: '**', redirectTo: '/category/1' }
];

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

2. 确认RouterModule已在侧边栏所在模块导入 #

如果侧边栏属于特性模块，必须在该模块中导入RouterModule才能使用routerLink指令：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
// 导入侧边栏组件

@NgModule({
  declarations: [SidebarComponent],
  imports: [
    CommonModule,
    RouterModule
  ],
  exports: [SidebarComponent]
})
export class SidebarModule { }

3. 排查点击事件是否被拦截 #

• 检查侧边栏CSS是否存在pointer-events: none属性，该属性会阻止点击事件触发；
• 检查父元素是否有点击事件调用event.preventDefault()或event.stopPropagation()，导致routerLink的点击事件被拦截。

4. 验证Angular版本兼容性 #

确保使用的路由API（如paramMap）与当前Angular版本匹配（paramMap为Angular 4+ API），版本过低可能引发异常。

内容的提问来源于stack exchange，提问作者Jace Johnson