离子：使用不同的参数加载相同的页面-Java 学习之路

我有一个页面，其中包含文本输入字段和按钮 . 在文本输入中输入数据并单击搜索时，使用输入文本进行Api调用，结果显示在按钮下方，这是我的代码

模板，

<ion-input type="text" [(ngModel)]="location"></ion-input>
<button (click)="onSearch()">Search</button>
<ion-list>
//display search results here
</ion-list>

零件，

//SearchPage
onSearch() {
    //api call to get list of restaurants in the location
}

用户还可以更改输入中的数据并再次搜索 . 这是有效的，但是当用户搜索两次或更多次并按下后退按钮时，他将被导航回主页而不是之前的搜索 .

有没有办法通过传递输入数据，在每次单击搜索按钮时将同一页面（此处为“SearchPage”）推送到navControl？这样后退按钮按预期工作？

这些变化对我有用

OnInit() {
    location=this.navParams.get('data');
    //Api call using location fetched from navParams
}
onSearch(){
    this.navController.push(SearchPage,{data:this.location})
}

1 回答

根据你的评论，我觉得你走错了路 . 你可以轻松地在你的应用中使用Searchbar .

根据上述文档，您可以按如下所示进行操作 .

html的

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="let item of items">
    {{ item }}
  </ion-item>
</ion-list>

.TS

@Component({
  templateUrl: 'search/template.html',
})
class SearchPage {

  searchQuery: string = '';
  items: string[];

  constructor() {
    this.initializeItems();
  }

  initializeItems() {
    this.items = [
      'Amsterdam',
      'Bogota',
      ...
    ];
  }

  getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

回复于 2024-05-06T09:44:43+08:00

离子：使用不同的参数加载相同的页面

1 回答

相关问题