4

Итак, я новичок в IONIC2. Я только пробовал helloworld, и это сработало .. и у меня есть предыдущий опыт работы с Angular2 и TypScript, но нет прежнего опыта в ИОННЫЙ.ionic2 .. TypeError: Невозможно прочитать запрос свойства null

То, что я пытаюсь сделать, это создать BarcodeScanner с Ionic2 по этой ссылке https://adamweeks.com/2016/05/11/creating-a-barcode-scanner-in-ionic-2-in-15-minutes/, однако всякий раз, когда я проверить в браузере я получаю следующее сообщение об ошибке в консоли

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null 

Я читал, что некоторые плагины могли бы не работает в браузере. Поэтому я попытался развернуть на своем телефоне (что мне раньше удавалось сделать с примером helloworld), однако все, что я мог видеть, было белым экраном.

В моем приложении у меня есть две страницы Scanpage, Homepage.

Вы можете найти код ниже.

home.html

<ion-navbar *navbar> 
    <ion-title> 
    Home 
    </ion-title> 
</ion-navbar> 

<ion-content class="home"> 
    <ion-card> 
    <ion-card-header> 
     Card Header 
    </ion-card-header> 
    <ion-card-content> 
     Hello World 
     <button block (click)="scan()">Scan</button> 
    </ion-card-content> 
    </ion-card> 
</ion-content> 

Home.ts

import {Page, Platform, Alert, NavController, Toast} from 'ionic-angular'; 
import {BarcodeScanner} from 'ionic-native'; 
import {BarcodeData} from '../../classes/BarcodeData.ts'; 
import {ScanPage} from '../scanResult/scan'; 


@Page({ 
    templateUrl: 'build/pages/home/home.html' 
}) 
export class HomePage { 
    // static get parameters() { 
    //  return [[Platform], [NavController]]; 
    // } 
    platform:Platform; 
    navController:NavController; 

    constructor(platform, navController:NavController) { 
     console.log('hello'); 
     this.platform = platform; 
     this.navController = navController; 
    } 

    scan() { 
     BarcodeScanner.scan().then(
      (result) => { 
      console.log('result'); 
      console.log(result); 
      if (!result.cancelled) { 
       const barcodeData = new BarcodeData(result.text, result.format); 
       this.scanDetails(barcodeData); 
      } 
      return Promise.resolve(result); 
      }) 
     .catch((err) => { 
      let toast = Toast.create({ 
      message: 'Mmmm, buttered toast', 
      duration: 3000 
      }); 

      this.navController.present(toast); 
      return Promise.reject(err); 
     }) 
    } 

    scanDetails(details) { 
    this.navController.push(ScanPage, {details: details}); 
    } 
} 

scan.html

<ion-list-header>Barcode</ion-list-header> 
<ion-item> 
{{ barcodeData.text }} 
</ion-item> 
<ion-list-header>Format</ion-list-header> 
<ion-item> 
{{ barcodeData.format }} 
</ion-item> 

scan.ts

import {Page, Platform, Alert, NavController, NavParams} from 'ionic-angular'; 
import {BarcodeData} from '../../classes/BarcodeData.ts'; 


@Page({ 
    templateUrl: 'build/pages/scanResult/scan.html' 
}) 
export class ScanPage{ 
    barcodeData: BarcodeData; 

    constructor(private nav: NavController, navParams: NavParams) { 
     this.barcodeData = navParams.get('details'); 
    } 
} 
+1

Что произойдет, если вы прокомментируете в 'static get parameters() {...'? –

+0

@ GünterZöchbauer хорошо это сработало .. но я не понимаю, почему? –

+1

Я не знаю Ионный. Вы можете попробовать без 'get parameters', но тогда вы должны указать тип в параметре конструктора, например' constructor (платформа: Platform, navController: NavController) {'иначе Угловые DI не знают, что передать этому параметру. Типы параметров используются как ключи в реестре DI. Возможно, 'get parameters' является заменой для' constructor (платформа @Inject (Platform), ...) ', которая может использоваться для указания ключа для DI (обескуражен, если нет необходимости) –

ответ

4

Изменить

constructor(platform, navController:NavController) { 

в

constructor(platform:Platform, navController:NavController) { 

DI нужен углы главного ключ, чтобы знать, что вводить для каждого параметра. Это может быть определено static get parameters() ... или путем предоставления типов параметрам конструктора.