离子:用不同的参数加载相同的页面
提问于 2017-08-24 23:38:16
我有一个页面，它有一个文本输入字段和一个按钮。当在文本输入中输入数据并单击“搜索”时，将使用输入文本进行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
}用户还可以更改输入和搜索中的数据，again.This正在工作，但是当用户搜索两次或更多次并按回按钮时，他将被导航回主页，而不是前面的搜索。
是否有办法通过传递输入数据，在每次单击搜索按钮时将相同的页面(此处的“SearchPage”)推送到navControl？这样后退按钮就可以正常工作了？
这些更改在组件中对我有效。
OnInit() {
location=this.navParams.get('data');
//Api call using location fetched from navParams
}
onSearch(){
this.navController.push(SearchPage,{data:this.location})
}
回答 1
Stack Overflow用户
发布于 2017-08-25 00:32:15
根据您的评论，我觉得您在错误的path.You可以很容易地使用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);
})
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45876502
复制相关文章
点击加载更多
腾讯云开发者
