Question

我有一个页面，其中包含文本输入字段和按钮。在文本输入中输入数据并单击搜索时，使用输入文本进行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
}

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

有没有办法通过传递输入数据，在每次点击搜索按钮时将同一页面（＆＃34; SearchPage＆＃34;此处）推送到navControl？这样后退按钮可以按预期工作吗？

这些变化对我有用在组件中

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

Answer 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);
      })
    }
  }
}

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

1 个答案: