如何在 Ionic 的外部浏览器中创建可点击并打开答案

【问题标题】：How do i make a clickable & open in an external browser in Ionic如何在 Ionic 的外部浏览器中创建可点击并打开
【发布时间】：2020-07-06 21:21:34
【问题描述】：

我使用 ionic 制作了一个二维码扫描仪。当我扫描链接时，它们不可点击。如何使它们可点击并在外部浏览器中打开？

代码如下：

home.page.html：

<ion-header>
 <ion-toolbar color="primary" >
   <ion-title>
     QR Scanner
   </ion-title>
 </ion-toolbar>
</ion-header>

<ion-content>
     <ion-card>
       <ion-card-header>Result :</ion-card-header>
       <ion-card-content>
         <ion-item *ngIf="scannedCode">
             {{ scannedCode }} 
         </ion-item>
         <ion-button (click)="scanCode()" fill="outline" id="btn-enter" size="default" ><ion-icon name="qr-code-outline" slot="start"></ion-icon>
             Scan Again</ion-button>
       </ion-card-content>
     </ion-card>
</ion-content> ```

home.page.ts 文件：

import { Component } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'
import { NavController } from '@ionic/angular';
import { NullVisitor } from '@angular/compiler/src/render3/r3_ast';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  scannedCode: string="";


  constructor(private barcodeScanner : BarcodeScanner,
    private navCtrl : NavController) {}

  scanCode(){
    this.barcodeScanner.scan().then(
      barcodeData => {
        this.scannedCode = barcodeData.text;
      }
    )
  }
  ngAfterViewInit(){
    this.scanCode();
  } 
}

【问题讨论】：

标签： angular typescript ionic-framework

【解决方案1】：

使用：在应用浏览器插件中。 https://ionicframework.com/docs/native/in-app-browser

扫描完成后，将该 URL 传递给您的应用内浏览器功能。例如：

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

export class HomePage {

options : InAppBrowserOptions = {
    location : 'yes',//Or 'no' 
    hidden : 'no', //Or  'yes'
    clearcache : 'yes',
    clearsessioncache : 'yes',
    zoom : 'yes',//Android only ,shows browser zoom controls 
    hardwareback : 'yes',
    mediaPlaybackRequiresUserAction : 'no',
    shouldPauseOnSuspend : 'no', //Android only 
    closebuttoncaption : 'Close', //iOS only
    disallowoverscroll : 'no', //iOS only 
    toolbar : 'yes', //iOS only 
    enableViewportScale : 'no', //iOS only 
    allowInlineMediaPlayback : 'no',//iOS only 
    presentationstyle : 'pagesheet',//iOS only 
    fullscreen : 'yes',//Windows only    
};
constructor(private theInAppBrowser: InAppBrowser) {
}

openWithSystemBrowser(url : string){
    let target = "_system";
    this.theInAppBrowser.create(url,target,this.options); // this will open mobile browser;
}


}

【讨论】：

【解决方案2】：

就用这个

`openWithSystemBrowser(url : string) {

让目标 = "_system";

Window.open(url,target);

// 这将打开移动外部浏览器；

【讨论】：