透明状态栏ionic2

时间:2017-03-23 05:04:10

标签: android ionic2

我需要透明状态bar ionic 2.

我安装了npm install --save @ionic-native/status-bar。还有

请参阅此链接https://ionicframework.com/docs/v2/native/status-bar/

我使用了this.statusBar.backgroundColorByHexString("#0e5591");但它没有用。

在我的应用组件下方。

import { Component, ViewChild,Inject } from '@angular/core';
import { Nav,NavController,Platform ,AlertController,MenuController,App,IonicApp} from 'ionic-angular';
import { Splashscreen ,Network,Toast} from 'ionic-native';
import { StatusBar } from '@ionic-native/status-bar';


@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  public app: App;
  currentuser;
  @ViewChild(Nav) nav1: Nav;
  auth:any;
  menu;
  nav:NavController;


  constructor(private statusBar: StatusBar,public appCtrl: App,public menu1: MenuController,public alertCtrl:AlertController,public platform: Platform,public authservice:Authservice) {

    this.auth=localStorage.getItem("email");
    console.log("Auth"+this.auth);
    // this.rootPage = this.isUserLoggedIn ? LoginPage : MycomplaintsPage;
    // console.log(this.rootPage);
    if(this.auth != undefined && this.auth != null)
    {
      this.rootPage = DashboardPage;
    }
    this.showRoot = true;



    this.initializeApp();


  }

  initializeApp() {

    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.statusBar.backgroundColorByHexString("#0e5591");
      Splashscreen.hide();



      if(Network.type === Connection.NONE)
      {
      console.log("success");
      let alert = this.alertCtrl.create({
      title: "Internet Connection",
      subTitle:"Please Check Your Network connection",
      buttons: [
      {
      text: 'Ok',
      handler: () => {
      this.platform.exitApp();
      }
      }
      ]
      });
      alert.present();
     }
    });

  }

  exit(){
      let alert = this.alertCtrl.create({
        title: 'Confirm',
        message: 'Do you want to exit?',
        buttons: [{
          text: "exit?",
          handler: () => { this.exitApp() }
        }, {
          text: "Cancel",
          role: 'cancel'
        }]
      })
      alert.present();
  }
  exitApp(){
    this.platform.exitApp();
  }


}

我得到这个错误

ORIGINAL EXCEPTION: No provider for StatusBar!

请建议我,

由于

1 个答案:

答案 0 :(得分:2)

您的导入似乎有两个ionic native版本。

import { Splashscreen ,Network,Toast} from 'ionic-native';
import { StatusBar } from '@ionic-native/status-bar';

确保package.json中只有@ionic-native/core。 另外根据最新的ionic-native文档, 您需要在ngModule

中将插件设置为提供程序
@NgModule({
  ...

  providers: [
    ...
    Statusbar
    ...
  ]
  ...
})