ionic inAppBrowser 打开 json 字符串 URL

Question

我正在尝试构建一个列表视图，以显示带有网站名称和 url 的 JSON 数据。一切都很好。但是当我将 onclick 转到 inAppBrowser 时，它给了我一个错误

下面的地址栏

http://localhost:8104/www.myjsonstringurl.com

在它显示的窗口中

无法获取/网址

这是我的 resources.html 页面的代码

<ion-header>
 <ion-navbar>
 <ion-title>Resources & Information</ion-title>
 </ion-navbar>
 </ion-header>

 <ion-content>
 <ion-item><p text-wrap>Our Resources page will take you to Mobile Devices default browser.</p></ion-item>

 <!-- 
 <ion-item><p text-wrap>Our Resources page will offer adding new resources and finding a team your area.</p></ion-item>

 <ion-buttons>
 <button ion-button full large color="secondary" style="color: #000000;">Add a resource!</button>
 <button ion-button full large color="secondary" style="color: #000000;">Find a team in your area!</button>
 </ion-buttons> -->

 <ion-list>
 <button ion-item detail-none *ngFor="let item of filteredList" (click)="openWithSystemBrowser(item.post.URL)"> 
 <h4 text-wrap>{‌{item.post.Name}}</h4>
 <p>{‌{item.post.URL}}</p>
 </button>
 </ion-list>
 </ion-content>

我的ts代码

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DataProvider } from '../../providers/data/data';
import { InAppBrowser, InAppBrowserOptions } from "@ionic-native/in-app-browser";
@IonicPage()
@Component({
 selector: 'page-resources',
 templateUrl: 'resources.html',
})
export class ResourcesPage {
 url: any[];
 tournments: any[];
 filteredList = [];
 listType = 'all';
 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 navCtrl: NavController,
 private dataProvider: DataProvider, private inAppBrowser: InAppBrowser, private theInAppBrowser: InAppBrowser) {
 this.dataProvider.getResource().subscribe((data: any) => {
 this.tournments = data.posts;
 this.filteredList = this.tournments;
 });
 }
 public openWithSystemBrowser(tournament: string){
 let target = "_system";
 this.theInAppBrowser.create(tournament,target,this.options);
}
public openWithInAppBrowser(url : string){
 let target = "_blank";
 this.theInAppBrowser.create(url,target,this.options);
}
public openWithCordovaBrowser(url : string){
 let target = "_self";
 this.theInAppBrowser.create(url,target,this.options);
} 
 openWebpage(url: string) {
 const options: InAppBrowserOptions = {
 zoom: 'yes',
 toolbar: 'yes',
 enableViewportScale: 'yes',
 }
 // Opening a URL and returning an InAppBrowserObject
 const browser = this.inAppBrowser.create(url, '_system', options);
 console.log(url);
 console.log(browser);
 console.log("link viewed");
 // Inject scripts, css and more with browser.X
 }
 /**
 * open Resoures detail page
 * 
 * @param tournament 
 */
 openResourcePage(tournament: any) {
 this.navCtrl.push('ResourceDetailPage', {tournament: tournament});
 }
 /**
 * search by text
 */
 onSearch(event: any) {
 const searchText = event.target.value.toLowerCase();
 this.filteredList = this.tournments.filter(item => {
 if ((item.post.NAME as string).toLowerCase().indexOf(searchText) > -1) {
 return true;
 }
 return false;
 });
 }
 segmentChanged(event: any) {
 this.dataProvider.getResource(event.value).subscribe((data: any) => {
 this.tournments = data.posts;
 this.filteredList = this.tournments;
 });
 }
}

当我输入 twitter.com 之类的网址时，它可以正常工作。 json 字符串的完整地址为http://url

有人可以帮忙吗？它不适用于浏览器、IOS 或 Android 模拟器

Answer 1

对于您传递给inAppBrowser.create() 方法的选项，this.options 中的this 中的context 可能不正确。

尝试在您的课程上下文中将您的选项定义为let 或const。

public openWithInAppBrowser(url : string){
let theOptions = this.options;
 let target = "_blank";
 this.theInAppBrowser.create(url,target,theOptions);
}