ionic2 .. TypeError：无法读取 null 的属性“查询”答案

【问题标题】：ionic2 .. TypeError: Cannot read property 'query' of nullionic2 .. TypeError：无法读取 null 的属性“查询”
【发布时间】：2016-09-19 12:45:38
【问题描述】：

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

我要做的是使用此链接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

我读到某些插件可能无法在浏览器上运行.. 所以我尝试在我的手机上进行部署（我之前设法通过 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 效果很好.. 但我不明白为什么？
我不知道 Ionic。您可以尝试不使用get parameters，但是您必须在构造函数参数中提供一个类型，例如constructor(platform:Platform, navController:NavController) {，否则Angulars DI 不知道为该参数传递什么。参数类型用作 DI 注册表中的键。也许get parameters 是constructor(@Inject(Platform) platform, ...) 的替代品，可用于指定DI 的密钥（如果不需要，不鼓励）
@GünterZöchbauer 刚刚尝试过.. 没有 getParameters .. 你只需要指定你提到的类型......非常感谢

标签： typescript ionic-framework angular hybrid-mobile-app ionic2

【解决方案1】：

改变

constructor(platform, navController:NavController) {

到

constructor(platform:Platform, navController:NavController) {

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

【讨论】：