如何解决Ionic2应用程序中的空白屏幕错误?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何解决Ionic2应用程序中的空白屏幕错误?相关的知识,希望对你有一定的参考价值。

我开发了一个应用程序来扫描条形码/二维码。我想添加一个反馈页面(一旦我扫描了qr代码,我希望在下一页看到结果)。扫描功能工作正常,我已生成一个页面来获得反馈,但一旦我添加此页面,我得到一个运行时错误。

但是在Stack Overflow的帮助下,我解决了它。应用程序已成功构建,也没有运行时错误。但现在我只是在离子发射器中得到一个空白的白色屏幕。我怎么解决这个问题?

Home.ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Platform} from 'ionic-angular';
import {BarcodeScanner} from 'ionic-native';
import {ScannedPage} from '../scanned-page/scanned-page';

@Component({
templateUrl: 'home.html'
})
export class HomePage {
private barcodeText:String;
private barcodeFormat:String;
private platform:Platform;
private navController:NavController;

constructor(public navCtrl: NavController,platform:Platform) {
this.platform = platform;
this.navController = navCtrl;
}
scanningDone(data){
this.navController.push(ScannedPage, {data: data});
}

doScan(){
    console.log('scannig product barcode');
    this.platform.ready().then(() => {
    BarcodeScanner.scan().then((result) => {
    if (!result.cancelled) {
    this.barcodeText = result.text;
    this.barcodeFormat = result.format;
                                    this.scanningDone({'text':result.text,'format':result.format});

                            }
     }, 
     (error) => {
     console.log('error when scanning product barcode');

        });

    });
   }
   }

Scannedpage.ts

   import { Component } from '@angular/core';
   import { NavController,NavParams } from 'ionic-angular';
   import { HomePage } from '../../pages/home/home'

    @Component({
    templateUrl: 'scanned-page.html'
    })
    export class ScannedPage  {

    rootpage = HomePage;
    private bcData;
    constructor(private navCtrl: NavController,navParams: NavParams) {
    this.bcData = navParams.get('data');

 }
 }
答案

在Chrome浏览器中,打开开发人员工具(ctrl + shift + I)。检查控制台中的错误。我也得到了空白页面。问题是由于缺少提供者。

在providers数组中,缺少barCodeScanner条目。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,

    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    BarcodeScanner,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

以上是关于如何解决Ionic2应用程序中的空白屏幕错误?的主要内容,如果未能解决你的问题,请参考以下文章

如何解决 Ionic2 中的 CORS 问题和 JSONP 问题

如何从 Chrome 浏览器中找到空白屏幕的 PHP 错误?

fgets正在返回一个空白屏幕

如何解决 Xampp phpMyAdmin 和 MySQL 的空白错误

我的 fig1.savefig 函数将我的图形保存为空白屏幕,我该如何解决?

我如何跟踪 ionic 2 中 app.component.ts 中的每个错误 [关闭]