Angular+Ionic路由传值实现分类搜索

Angular+Ionic路由传值实现分类搜索

1，发送页面文件中，路由绑定待传的值

 <li *ngFor="let item of selectedClassList"
                            [routerLink]="['/product-reclassify',item.categoryId ,item.name]"
                            (click)="changeTadId(item)">
                            <div class="commodity-img">
                             <img [src]="item.pictureUrl" >
                           </div>
                           <div class="commodity-text">
                                {{item.name}}
                           </div>
 </li>

2，发送ts文件选中赋值

  changeTadId(item) {
    this.tagIdList = item.categoryId;
    this.tagName = item.name;
    console.log(item.name+this.tagIdList);
  }

3，app-routing.module.ts
路由文件中
接受页接口的path下绑定：

:tagId/:tagName

  { path: 'product-reclassify/:tagId/:tagName', loadChildren: './pages/product-reclassify.....}

4，
接收ts文件中引入
this.tagId = this.activatedRoute.snapshot.paramMap.get(‘tagId’);

constructor(
    private rest: RestService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private navCtrl: NavController,
    private menu: MenuController,
    private loadingCtrl: LoadingController,
    public appService: AppService,
    public localStorageService: StorageService,
    private toastCtrl: ToastController
  )
  { 
    super(appService, localStorageService);
    this.tagId = this.activatedRoute.snapshot.paramMap.get('tagId');
    this.tagName = this.activatedRoute.snapshot.paramMap.get('tagName');
  }

5,接收文件中使用
ts中

//产品搜索
  async getProductSearch() {
    const userInfo = {
      'pageNo': 1,
      'pageSize': 16,
      'price': 1 - 100,
      'categoryId': this.tagId,//传入接收的tagId
    }
    this.rest.apiPost(userInfo, this.rest.getProductSearch).subscribe(res => {
      const { status, msg, data } = res;
      if (status == 200) {
        console.log("------产品分类搜索-----");
        this.tagSearchList = res.data.result;
        console.log(this.tagSearchList);
      } else {
        console.log("请求失败");
      }
    });
  }

html中

 <div class="selected-tag" *ngIf="selectTag" (click)="touchTag()">
                 {{this.tagName}}//展示接收的agName
                 <div class="sure-tag" *ngIf="selectTag">
                   <ion-icon name="close-outline" class="sure-outline"></ion-icon>
                 </div>
  </div>

6.初步效果