1、业务场景,如下图:
点击年份2019,将参数传到期数界面
点击期数,将年份的参数2019和期数的id传到学员信息界面:
2、代码实现
年份界面HTML:
<ion-content>
<ion-searchbar placeholder="请输入年份搜索" (ionChange)="onSearchChange($event)" [debounce]="250">
</ion-searchbar>
<ion-list *ngFor="let item of listYear" >
<ion-item [routerLink]="['/searchbyyear']" [queryParams]="{year:item.yearTime}">
<ion-label>{{item.yearTime}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
searchbyyear的html界面:
<ion-content>
<ion-searchbar placeholder="请输入期数搜索" (ionChange)="onSearchChange($event)" [debounce]="250">
</ion-searchbar>
<ion-list ion-padding>
<ion-item *ngFor="let item of listGrade" [routerLink]="['/prientscreencheck']" [queryParams]="{organizationId:item.id,year:year,organizationName:item.organizationName}">
<ion-label>{{item.organizationName}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
searchbyyear.page.ts页面:
import { Component, OnInit, NgModule } from '@angular/core';
import { InterceptorService } from '../../shared/providers/interceptor.service';
import { NavController } from '@ionic/angular';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-searchbyyear',
templateUrl: './searchbyyear.page.html',
styleUrls: ['./searchbyyear.page.scss'],
})
export class SearchbyyearPage implements OnInit {
public year: number;
constructor(
public httpService: InterceptorService,
public route: Router,
public activatedRoute: ActivatedRoute,
public nav: NavController
) {
};
ngOnInit() {
this.GetGrade();
this.activatedRoute.queryParams.subscribe((data: any) => {
this.year = data.year;
})
}
public listGrade: any = [];
GetGrade() {
let api = 'NO1System/no1/organization/searchOnSchool';
this.httpService.get(api).subscribe((Response: any) => {
console.log(Response);
this.listGrade = Response.json().data;
console.log(this.listGrade);
})
}
}