Angular 5路由参数错误：商品页筛选路由匹配失败问题

看起来你遇到的核心问题是路由配置和参数传递方式不匹配，导致Angular找不到对应的路由。咱们一步步拆解解决：

问题根源 #

你的路由配置是{path: 'shop/:type', component: ShopComponent}，这表示它期望的URL结构是/shop/jeans（type是路径参数），但你通过queryParams生成的URL是/shop?type=jeans（type是查询参数），两者不匹配，所以抛出了Cannot match any routes错误。

两种解决方案 #

方案1：继续使用路径参数（保持现有路由配置） #

如果你想保留shop/:type的路由结构，需要修改其他组件里的routerLink写法，把type作为路径参数传递：

<!-- 替换原来带queryParams的写法 -->
<a [routerLink]="['/shop', 'jeans']">Jeans</a>

然后在ShopComponent中通过ActivatedRoute获取路径参数并执行筛选：

import { ActivatedRoute } from '@angular/router';
import { ProductService } from './path-to-product-service';

export class ShopComponent {
  filteredProducts: any[] = [];

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

  ngOnInit() {
    // 监听路径参数变化，实时更新筛选结果
    this.route.paramMap.subscribe(params => {
      const productType = params.get('type');
      if (productType) {
        this.filteredProducts = this.productService.getAllProducts().filter(
          product => product.type === productType
        );
        console.log('筛选结果:', this.filteredProducts);
      }
    });
  }
}

方案2：改用查询参数（调整路由配置） #

如果你更偏好/shop?type=jeans的URL格式，需要先修改路由配置，去掉路径参数:type：

// 路由模块中的配置修改为
{ path: 'shop', component: ShopComponent }

然后在ShopComponent中获取查询参数并筛选：

import { ActivatedRoute } from '@angular/router';
import { ProductService } from './path-to-product-service';

export class ShopComponent {
  filteredProducts: any[] = [];

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

  ngOnInit() {
    // 监听查询参数变化
    this.route.queryParamMap.subscribe(params => {
      const productType = params.get('type');
      if (productType) {
        this.filteredProducts = this.productService.getAllProducts().filter(
          product => product.type === productType
        );
        console.log('筛选结果:', this.filteredProducts);
      }
    });
  }
}

这种情况下，你原来带queryParams的routerLink写法是完全正确的，不需要修改。

关于*ngFor的疑问 #

*ngFor本身不会导致路由匹配错误！只要你把筛选后的filteredProducts正确绑定到*ngFor上，比如：

<div class="product-card" *ngFor="let product of filteredProducts">
  <h3>{{ product.name }}</h3>
  <p>{{ product.price | currency }}</p>
</div>

只要filteredProducts是有效的数组，渲染就不会有问题。路由错误和*ngFor没有直接关联。

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