ionic 4 实现在线查询

首先我们需要执行此命令：

npm install @ionic-native/in-app-browser

执行完毕后我们需要导入包：

1. 需要在app.module.ts里面导入：

// 搜索引擎怡莱
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

providers: [
InAppBrowser,
],

2. 我们需要在我们需要的页面中的ts导入：

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';


constructor(
    private iab: InAppBrowser,
    ) { }

3. 我们开始写代码：在我们页面的ts里面写方法：

  search: any;

  // -------------在线搜图
  searchBaidu() {
    const url = 'https://www.baidu.com/s?wd=' + this.search;   // 这个是我们在输入框输入的时候启用这个
    // const url = 'https://www.pexels.com';  // 这个是不需要输入框输入，直接跳入此页面
    const browser = this.iab.create(url);   
    browser.show();
  }

4. 在html页中：content中输入

 <ion-searchbar showCancelButton="always" value="https://www.pexels.com" [(ngModel)]="search" (ionChange)="searchBaidu()"  placeholder="https://www.pexels.com"  animated></ion-searchbar>

备注：

参照官网：

https://ionicframework.com/docs/native/in-app-browser