使用场景：
app的某个页面需要一个搜索功能：1. 点击搜索图标打开一个新的搜索页2. 加载页面的同时给搜索框设置焦点、触发键盘。（提升用户的体验，类似于微信的搜索功能操作）
具体方法：
- 在对应的ts文件中引入IonSearchbar
// 导入 IonSearchbar
import { IonSearchbar} from '@ionic/angular';@Component({selector: 'app-file-search',templateUrl: './file-search.component.html',styleUrls: ['./file-search.component.scss'],
})
export class FileSearchComponent implements OnInit {// 申明 IonSearchbar 为 ionSearchbar；下边通过this.ionSearchbar调用setFocus()方法。@ViewChild(IonSearchbar, { static: true }) ionSearchbar: IonSearchbar;constructor() { }ngOnInit() { }// 该方法在加载页面时会触发ionViewDidEnter() {setTimeout(() => {// 给ion-Searchbar组件的输入框设置焦点this.ionSearchbar.setFocus();});}
}
- 在html文件中添加 ts文件中定义的 ionSearchbar
<ion-searchbar #ionSearchbar ...>
- 效果展示
附上Ionic4官方手册：
https://ionicframework.com/docs/api/searchbar
