Итак, я новичок в 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');
}
}
Что произойдет, если вы прокомментируете в 'static get parameters() {...'? –
@ GünterZöchbauer хорошо это сработало .. но я не понимаю, почему? –
Я не знаю Ионный. Вы можете попробовать без 'get parameters', но тогда вы должны указать тип в параметре конструктора, например' constructor (платформа: Platform, navController: NavController) {'иначе Угловые DI не знают, что передать этому параметру. Типы параметров используются как ключи в реестре DI. Возможно, 'get parameters' является заменой для' constructor (платформа @Inject (Platform), ...) ', которая может использоваться для указания ключа для DI (обескуражен, если нет необходимости) –