Angular点击标签实现产品搜索及页面跳转问题求助

标签展示效果：

1. 先配置路由规则 #

首先要创建一个用于展示标签对应产品的页面（比如TagProductsPage），然后在app-routing.module.ts中添加路由，让它能接收标签作为参数：

const routes: Routes = [
  // 其他现有路由...
  { path: 'tag-products/:tag', component: TagProductsPage }
];

2. 让标签可点击并实现跳转 #

有两种常用方式实现标签的点击跳转逻辑：

方式一：直接用RouterLink（推荐） #

修改home.page.html的标签渲染代码，给ion-chip绑定RouterLink，点击直接跳转到目标页面并携带标签参数：

<ion-chip *ngFor="let tag of tags" [routerLink]="['/tag-products', tag.tags]">
  <ion-label>{{ tag.tags }}</ion-label>
</ion-chip>

点击标签后会直接跳转到/tag-products/[标签值]路径，路由参数自动携带标签内容。

方式二：通过点击事件触发（适合需要先处理逻辑再跳转的场景） #

如果需要先调用API获取数据再跳转，修改模板和组件：

<ion-chip *ngFor="let tag of tags" (click)="searchByTag(tag.tags)">
  <ion-label>{{ tag.tags }}</ion-label>
</ion-chip>

然后更新home.page.ts的searchByTag方法，获取数据后跳转到目标页面（可通过路由状态传递数据）：

// 先在constructor中注入Router
constructor(private router: Router, private searchService: SearchService) {}

searchByTag(tag: string) {
  this.searchService.searchByTagCall(tag).subscribe(
    (data: any) => {
      // 跳转时携带产品数据，也可以让目标页面自行调用API
      this.router.navigate(['/tag-products', tag], { state: { products: data.body } });
    },
    error => {
      console.log('Error', error);
    });
}

3. 在目标页面获取参数并展示产品 #

在tag-products.page.ts中，通过ActivatedRoute获取路由参数，调用API加载产品：

import { ActivatedRoute } from '@angular/router';
import { SearchService } from '../path-to-your-search-service';

export class TagProductsPage {
  products: any[] = [];
  currentTag: string = '';

  constructor(
    private route: ActivatedRoute,
    private searchService: SearchService
  ) {}

  ngOnInit() {
    // 获取路由中的标签参数
    this.route.paramMap.subscribe(params => {
      this.currentTag = params.get('tag') || '';
      if (this.currentTag) {
        this.loadProducts();
      }
    });

    // 如果是通过路由状态传了数据，可直接使用
    // const navigation = this.router.getCurrentNavigation();
    // this.products = navigation?.extras.state?.['products'] || [];
  }

  loadProducts() {
    this.searchService.searchByTagCall(this.currentTag).subscribe(
      (data: any) => {
        this.products = data.body; // 按实际API返回结构调整
      },
      error => {
        console.log('加载产品失败', error);
      }
    );
  }
}

最后在tag-products.page.html中渲染产品：

<ion-header>
  <ion-toolbar>
    <ion-title>{{ currentTag }} 产品列表</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let product of products">
      <ion-label>{{ product.name }}</ion-label> <!-- 根据你的产品字段修改 -->
    </ion-item>
  </ion-list>
</ion-content>

补充注意点 #

• 确保searchByTagCall返回的data.body是正确的产品数组，根据实际API返回结构调整字段。
• 用RouterLink跳转+目标页面自行调用API的方式，更适配Angular路由设计，避免页面刷新时丢失状态数据。
• 若标签包含特殊字符，Angular Router会自动处理编码/解码，无需额外操作。

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