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

Posted 2021-04-21

我开发了一个应用程序来扫描条形码/二维码。我想添加一个反馈页面（一旦我扫描了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 {}