Question

首先，我是Ionic和MQTT的新手。如果有人在这个问题上帮助我，那将很好。我试图在ionic CLI PRO 4.3.1中推送页面。当消息从MQTT主题到达（1）时，我正在尝试打开一个新页面。 navCtrl语句仅在if语句之外起作用。 我收到无法读取未定义错误的属性“ push”。

我的代码在下面；

add-device.ts

import { Component } from '@angular/core';
import { IonicPage, ModalController, NavParams, NavController, ViewController } from 'ionic-angular';
import {Paho} from 'ng2-mqtt/mqttws31';
import { SignupPage } from '../pages';


@IonicPage()

@Component({
  selector: 'page-add-device',
  templateUrl: 'add-device.html'
})


export class addDevicePage {

  hello: any;
  pushPage: any;
  params: Object;

  constructor(public navCtrl: NavController, 
    public modalCtrl: ModalController, 
    private viewCtrl: ViewController,
    public navParams: NavParams) {}

deviceIDsend() {

console.log("MQQT");
var mqttHost = 'broker.mqttdashboard.com';
var port = 8000; // port for above

this.client = new Paho.MQTT.Client
(mqttHost, port,
  "web_" + parseInt(Math.random() * 100, 10));// set callback handlers
    console.log("connecting to "+ mqttHost +" "+ port);

this.client.onConnectionLost = this.onConnectionLost;
this.client.onMessageArrived = this.onMessageArrived;
 //this.client.subscribe = this.subscribe;
//var options = {
  //  useSSL: true,
    //userName: "username",
    //password: "password",
    //onSuccess:this.onConnect,
    //onFailure:this.doFail
 // }

  // connect the client
this.client.connect({onSuccess:this.onConnect.bind(this)});}
// called when the client connects
onConnect(client) {
console.log("onConnect");

this.client.subscribe("/j/" +this.device_id);
this.message = new Paho.MQTT.Message(this.device_id);
this.message.destinationName = "/j/" +this.device_id;// message.qos = qos;

console.log(this.device_id);
 this.client.send(this.message);}

onMessageArrived(message) {
  console.log("onMessageArrived:" + message.payloadString);

  if (message.payloadString == "1") {
             console.log('in');

    this.navCtrl.push('SignupPage');  
   }

   else{
        console.log('hello');
   }
}

onConnectionLost(responseObject) {
  if (responseObject.errorCode !== 0) {
    console.log("onConnectionLost:" + responseObject.errorMessage);
  }

}


}

add-device.html

<ion-header transparent>
  <ion-navbar transparent>
  </ion-navbar>

</ion-header>
<ion-content class="background">
<ion-card>
  <form (submit)="deviceIDsend()">
  <ion-list>
        <h3 text-wrap style="padding-left: 8%">{{ 'j' | translate }}</h3>
        <p  text-wrap style="padding-left: 8%">{{ 'j' | translate }}</p>
      <div padding>
         <ion-item class="item3"> 
        <ion-label fixed>{{ 'NUMBER' | translate }}</ion-label>
        <ion-input type="email" type="text" name="deviceID" [(ngModel)]="device_id"></ion-input>
      </ion-item>
</div>
    <div padding>
        <button class="LoginButton" ion-button block value="submit" 
        [navPush]="pushPage">{{ 'ADD' | translate }}</button>
      </div>
      </ion-list>
  </form>
</ion-card>

</ion-content>

add-device.module

import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { IonicPageModule } from 'ionic-angular';

import { addDevicePage } from './add-device';

@NgModule({
  declarations: [
    addDevicePage,
  ],
  imports: [
    IonicPageModule.forChild(addDevicePage),
    TranslateModule.forChild()
  ],
  exports: [
    addDevicePage
  ]
})
export class addDevicePageModule { }

Answer 1

您可以尝试使用箭头功能吗？我唯一的怀疑者是this，但我不确定100％是否正确，因为OP指出this.navCtrl.push在if块之外工作。

onMessageArrived = (message) => {
  console.log("onMessageArrived:" + message.payloadString);

  if (message.payloadString == "1") {
             console.log('in');

    this.navCtrl.push('SignupPage');  
   }

   else{
        console.log('hello');
   }
}

仅在if语句中无法使用MQTT读取Ionic中未定义的属性“ push”

1 个答案: