ionic2 .. TypeError: Cannot read property 'query' of null

Question

所以我是 IONIC2 的新手..我只尝试过 helloworld 并且它有效..我之前确实有过 Angular2 和 Typescript 的经验，但以前没有使用 IONIC 的经验。

我想做的是使用这个 link https://adamweeks.com/2016/05/11/creating-a-barcode-scanner-in-ionic-2-in-15-minutes/ 用 Ionic2 创建一个 BarcodeScanner，但是每当我在浏览器上测试时，我都会在控制台中收到以下错误

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

我读到一些插件可能无法在浏览器上运行..所以我尝试在我的 phone 上部署（我之前设法用 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');
    }
}

Answer 1

改变

constructor(platform, navController:NavController) {

至

constructor(platform:Platform, navController:NavController) {

Angulars DI 需要一个键来知道为每个参数注入什么。这可以通过 static get parameters() ... 或通过向构造函数参数提供类型来定义。

ionic2 .. TypeError: Cannot read property 'query' of null

ionic2 .. TypeError: Cannot read property 'query' of null

typescript

hybrid-mobile-app

ionic-framework

ionic2

angular