Ionic Angular：如何让链接在外部移动浏览器中打开

嗨，我懂你遇到的问题了！你第一个用window.open('https://stackoverflow.com', '_system', 'location=yes')的例子能正常工作，但大概率是碰到了动态链接绑定或者和Angular的ng-href冲突的情况对吧？我给你几个靠谱的解决方法：

方法一：用Ionic官方推荐的InAppBrowser插件（最稳定） #

这个是官方推荐的方式，兼容性和可控性都更好，步骤也简单：

1. 先安装插件：

# Cordova环境
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

# Capacitor环境
npm install cordova-plugin-inappbrowser
npx cap sync

2. 在你的Angular组件里注入并写一个打开方法：

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

constructor(private iab: InAppBrowser) {}

// 自定义打开外部链接的方法
openExternalLink(url: string) {
  this.iab.create(url, '_system', 'location=yes');
}

3. 在HTML里直接调用这个方法，完全避开ng-href的冲突：

<p class="descriptive-class">
  <a (click)="openExternalLink('https://stackoverflow.com')">
    <img src="assets/img/awesome_picture.png" alt="blablabla">
  </a>
</p>

方法二：修复原生window.open和ng-href的冲突 #

如果你不想用插件，只想用原生方法，那得阻止Angular的默认跳转行为：

<p class="descriptive-class">
  <a ng-href="https://stackoverflow.com" onclick="event.preventDefault(); window.open('https://stackoverflow.com', '_system', 'location=yes')">
    <img src="assets/img/awesome_picture.png" alt="blablabla">
  </a>
</p>

这里的event.preventDefault()就是关键，它会告诉Angular不要执行默认的应用内跳转，而是执行你写的外部打开命令。要是链接是动态绑定的，比如用{{ externalUrl }}，直接把变量套进去就行：

<p class="descriptive-class">
  <a ng-href="{{ externalUrl }}" onclick="event.preventDefault(); window.open('{{ externalUrl }}', '_system', 'location=yes')">
    <img src="assets/img/awesome_picture.png" alt="blablabla">
  </a>
</p>

方法三：全局配置批量处理所有外部链接 #

要是你的应用里有超多外部链接，一个个改太麻烦，可以全局配置路由，让所有外部链接自动跳转到外部浏览器：
在app.module.ts里添加这段配置：

import { NgModule } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

@NgModule({
  // 其他原有配置...
  providers: [InAppBrowser]
})
export class AppModule {
  constructor(private router: Router, private iab: InAppBrowser) {
    // 监听路由跳转事件
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        const targetUrl = event.url;
        // 判断是否为外部链接（以http/https开头）
        if (targetUrl.startsWith('http')) {
          event.preventDefault(); // 阻止应用内跳转
          this.iab.create(targetUrl, '_system');
        }
      }
    });
  }
}

最后提个小注意点：测试的时候一定要用真机或者模拟器，浏览器里的Ionic Lab可能不会触发_system的外部打开行为哦！

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