Ionic4中实例化InAppBrowser报TS2554参数错误求助

这个问题我太熟悉了——你参考的是Ionic3的教程，但写的是Ionic4代码，两者的InAppBrowser API有本质区别，直接用new InAppBrowser()的方式在Ionic4+里已经不再适用，这才导致了参数不匹配的TypeScript错误。

错误根源 #

在Ionic3中，InAppBrowser是可以通过new关键字直接实例化的类，构造函数接受URL和目标窗口参数；但到了Ionic4（基于Angular），它变成了一个需要依赖注入的服务，打开网页的逻辑要通过服务的create()方法实现，原构造函数被改为0参数的类型定义，所以你传2个参数就会触发TS2554错误。

具体修复步骤 #

1. 确认依赖已正确安装（若未安装）

先确保你已经安装了Cordova插件和对应的Ionic Native包装器（Ionic4对应Native 5.x版本）：

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser@5.x

2. 修改页面组件代码

在main.page.ts中调整代码，改用依赖注入+create()方法的方式：

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'; // 注意路径的/ngx后缀

@Component({
  selector: 'app-main',
  templateUrl: './main.page.html',
  styleUrls: ['./main.page.scss'],
})
export class MainPage {

  // 构造函数中注入InAppBrowser服务
  constructor(private platform: Platform, private iab: InAppBrowser) { }

  openUrl() {
    this.platform.ready().then(() => {
      // 用create方法替代new，参数和原逻辑一致
      const browser = this.iab.create("https://www.techiediaries.com", "_system");
      
      // 可选：监听浏览器事件（比如加载完成、关闭）
      // browser.on('loadstop').subscribe(event => {
      //   console.log('页面加载完成', event);
      // });
    });
  }

}

关键变化点 #

• 不再直接new InAppBrowser(...)，而是通过注入的iab实例调用create()方法，该方法支持你原来的URL、目标窗口参数，还可额外传入配置选项（比如窗口样式）。
• 导入路径必须加上/ngx，这是Ionic4+中Angular版本Native插件的标准导入格式。

内容的提问来源于stack exchange，提问作者sobha