无论是网络开发还是应用开发,自动完成是常用组件之一。
可惜截止到目前,离子官方并未提供此组件。
ionic2-autocomplete是GitHub上的开源的Ionic2组件,本文将讲解如何在自己的项目中使用它。
组件地址:https://github.com/kadoshms/ionic2-autocomplete
1) npm安装ionic2-auto-complete——保存
2)打开app.module。ts,添加:从ionic2-auto-complete,进口{AutoCompleteModule}
并且在进口数组里面增加AutoCompleteModule
3)打开应用程序。scss,添加:@ import“. ./. ./node_modules/ionic2-auto-complete/自动完成”;
4)直接找你的页面中使用组件:& lt; ion-auto-complete> & lt;/ion-auto-complete>
5)给自动完成添加dataProvider:写一个服务来从后台获取数据,离子g提供者autocomplete-service,
代码如下:
别忘了在app.module.ts中增加:
并且在提供者数组中增加AutocompleteServiceProvider。
7)在你使用自动完成组件的页面ts文件中,增加:
进口{AutocompleteServiceProvider}从“. ./. ./供应商/autocomplete-service/autocomplete-service”;构造函数构造函数中增加:publicautocompleteSer: AutocompleteServiceProvider
8)在刚刚使用ion-auto-complete的地方修改为:& lt; ion-auto-complete [dataProvider]=" autocompleteSer祝辞& lt;/ion-auto-complete> 9)
离子为看看效果吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
