ionic inAppBrowser 打开 json 字符串 URL

Question

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

下面的地址栏

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

在它显示的窗口中

无法获取/网址

这是我的资源代码.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>

我的目录代码

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

一种可能性是this.options中传递给inAppBrowser.create()方法的选项contextthis不正确。

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

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