Question

我有这个简单的提供程序：

import { Injectable } from "@angular/core";

@Injectable()
export class DevicesService {
    public check_string : any;

    constructor(){
        this.check_string = "Provider enabled";
    }

    getStatusString() { return this.check_string; }
}

并且我正在尝试将该check_string变量传递给home.ts中的离子输入：

<strong><ion-input round id="stringstatus" type="text" [(ngModel)]="stringstatus"></ion-input></strong>



import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DevicesService } from '../../providers/devicefactory/devicefactory';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public stateString : string;

  constructor(public navCtrl: NavController, private deviceProvider : DevicesService) {
    this.stateString = this.deviceProvider.check_string;
    //this.stateString = this.deviceProvider.getStatusString();
  }

}

我尝试了两种方式，直接传递变量和获取返回函数，但是一旦我运行应用程序，它就会显示空白页。我可能会错过什么？

非常感谢所有人干杯！

Answer 1

尝试使用deviceProvider.getStatusString()。无需在构造函数中使用this；

constructor(public navCtrl: NavController, private deviceProvider : DevicesService) {
    this.stateString = deviceProvider.getStatusString();
}

Answer 2

您可以直接在ngModel中设置它：

[(ngModel)]="deviceProvider.check_string"

或

[(ngModel)]="deviceProvider.getStatusString()"

Answer 3

你好Rameez和saperlipopette，

我在你们俩都获得这个的过程中尝试过

devicefactory.ts

import { Injectable } from "@angular/core";
//import { BluetoothLE } from '@ionic-native/bluetooth-le';

@Injectable()
export class DevicesService {
    public ble_status : boolean;
    public check_string : any;

    // public BLE : BluetoothLE
    constructor(){
        this.ble_status = false; 
        //this.BLE.initialize();
        //this.BLE.isEnabled().then(result => { this.ble_status = result.isEnabled; });
        this.check_string = "Provider enabled";
    }

    getStatus() { return this.ble_status; }
    getStatusString() { return this.check_string; }

    enableBLE() {
        //if (this.ble_status) this.BLE.enable();  else  this.BLE.disable();
        if (this.ble_status) this.check_string = "Provider enabled";  else  this.check_string = "Provider disabled";
    }
}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HoergerateApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SettingsPage } from '../pages/settings/settings';
import { DevicesService } from '../providers/devicefactory/devicefactory';


@NgModule({
  declarations: [
    HoergerateApp,
    AboutPage,
    SettingsPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(HoergerateApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    HoergerateApp,
    AboutPage,
    SettingsPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    DevicesService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {

}

home.html

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

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
   <p>
    Check bluetooth status:<br>
    <strong><ion-input round id="ble_state" type="text" [(ngModel)]="ble_state"></ion-input></strong>
  </p>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DevicesService } from '../../providers/devicefactory/devicefactory';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public ble_state : string;

  constructor(public navCtrl: NavController, public deviceProvider : DevicesService) {
    //this.ble_state = ( this.deviceService.ble_status ?  "Bluetooth is enabled" : "BLuetooth is disabled" );

    //this.ble_state = deviceProvider.check_string;
    this.ble_state = deviceProvider.getStatusString();
  }

}

在我也直接将其放入[（ngModel）]之前，但是它是空白页.....我认为这与传递变量有关，也许是因为，如果我发表评论：

this.ble_state = deviceProvider.getStatusString();

该应用似乎可以正常运行... 即使它在编译过程中未报告任何错误，也可能与ionic和cordova安装平台或相关性有关？

谢谢

离子3：将提供者的变量传递给离子输入

3 个答案: