android - 在 InAppBrowser Ionic 中加载 Spinner

Question

我正在尝试在页面加载时在 InAppBrowser 中实现 IonicLoading Spinner。 这就是我正在做的:

<button class="button" ng-controller="View" ng-click="showHelp('http://www.google.com')">
</button>

Controller :

.controller('View', function($scope, $ionicLoading) {

	$scope.showHelp=function(url) {
	var ref = window.open(url, '_blank', 'location=yes');
    ref.addEventListener('loadstart', function(){ $ionicLoading.show(); }); 
	ref.addEventListener('loadstop', function() { $ionicLoading.hide(); });
	
	}
})

问题是微调器没有加载到 InAppBrowser 中，而是显示在后台(即仅当我关闭 InAppBrowser 时才可见)

如有任何帮助，我们将不胜感激。

Answer 1

我正在使用 ionic V2+ (ionic 3 ) 应用程序并且我使用了 cordova-plugin-dialogs 但它没有像我预期的那样为我工作。我用了Spinner Dialog并且工作得很好。请在下面找到示例代码

正在安装插件

ionic cordova 插件添加 cordova-plugin-native-spinner

npm install --save @ionic-native/spinner-dialog

代码

import { InAppBrowser } from '@ionic-native/in-app-browser';
import { SpinnerDialog } from '@ionic-native/spinner-dialog';

constructor(
private iab: InAppBrowser,
private spinnerDialog: SpinnerDialog) { }

...

 const browser = this.iab.create('https://www.google.com',
  '_blank',
  {
    location: 'no',
    clearcache: 'yes',
    clearsessioncache: 'yes'
  });

browser.on('loadstart').subscribe((eve) => {
  this.spinnerDialog.show(null, null, true);     
}, err => {
  this.spinnerDialog.hide();
})

browser.on('loadstop').subscribe(()=>{
  this.spinnerDialog.hide();
}, err =>{
  this.spinnerDialog.hide();
})

browser.on('loaderror').subscribe(()=>{
  this.spinnerDialog.hide();
}, err =>{
  this.spinnerDialog.hide();
})

browser.on('exit').subscribe(()=>{
  this.spinnerDialog.hide();
}, err =>{
  this.spinnerDialog.hide();
})