在Ionic的.ts文件中如何让browser变量全局可用以解决未定义错误？

看起来你遇到的问题是没把browser当成组件类的成员变量来正确管理，误用了全局变量的写法。咱们一步步来修复这个问题：

问题根源 #

你在类里声明了public browser: object，但在构造函数里直接写browser = this.inAppBrowser.create(...)——这其实是在全局作用域创建了一个变量（严格模式下还会报错），并没有给类的browser成员赋值。之后在CheckSocialMediaLinks里访问browser时，自然找不到这个变量，因为它既不是类的属性，也没在函数作用域里定义。

正确解决方案 #

1. 准确定义成员变量的类型 #

InAppBrowser.create()返回的是InAppBrowserObject类型，别用宽泛的object，先导入这个类型：

import { InAppBrowser, InAppBrowserOptions, InAppBrowserObject } from "@ionic-native/in-app-browser";

然后在类里声明变量，初始化为null避免类型报错：

public browser: InAppBrowserObject | null = null;

2. 给类成员正确赋值 #

在构造函数的platform.ready()回调里，要通过this.browser给类成员赋值，而不是直接用browser：

this.browser = this.inAppBrowser.create("https://www.awebsite.co.uk/", '_blank', options);

3. 在函数中通过this访问变量 #

在CheckSocialMediaLinks里，必须用this.browser访问类成员，而且最好先做非空判断，避免空值报错：

CheckSocialMediaLinks(url: string){
  // 先确认browser已初始化
  if (!this.browser) return;
  
  const watch = this.browser.on('loadstart').subscribe(event => {
    this.CheckSocialMediaLinks(event.url);
  });
}

修改后的完整代码 #

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { InAppBrowser, InAppBrowserOptions, InAppBrowserObject } from "@ionic-native/in-app-browser";
import { AppAvailability } from '@ionic-native/app-availability';

@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
})
export class HomePage {
 // 正确定义类型并初始化
 public browser: InAppBrowserObject | null = null;

 constructor(
  public navCtrl: NavController, 
  private inAppBrowser: InAppBrowser, 
  public platform: Platform, 
  private appAvailability: AppAvailability
 ) {
  // IAB配置项
  const options: InAppBrowserOptions = {
   toolbar: 'no',
   location: 'no',
   zoom: 'no'
  }
  // 设备就绪后初始化浏览器
  this.platform.ready().then( () => {
   this.browser = this.inAppBrowser.create("https://www.awebsite.co.uk/", '_blank', options);
   this.browser.on('loadstart').subscribe(event => {
    this.CheckSocialMediaLinks(event.url);
   });
  })
 }

 // 检查链接是否为社交媒体链接
 CheckSocialMediaLinks(url: string){
  if (!this.browser) return;
  
  const watch = this.browser.on('loadstart').subscribe(event => {
   this.CheckSocialMediaLinks(event.url);
  });
 }
}

额外提醒 #

• Angular组件里，多个方法共享的变量一定要作为类成员管理，通过this访问，别乱用全局变量。
• 加上非空判断能避免设备未就绪时browser未初始化导致的报错。

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