javascript - Ionic 2 - 动态改变状态栏的颜色

Question

我正在尝试根据获取的参数在 ionic 页面中更改状态栏颜色。

只有 onDeviceReady() 函数中的 colorStatusBar 变量显示为 undefined。

有人可以帮我解决这个问题吗？

typeColor: string;
colorStatusBar: string;

constructor(public navCtrl: NavController, public navParams: NavParams, statusBar: StatusBar){
    this.typeColor = this.navParams.get('type');
    if(this.typeColor == "value1"){
      this.colorStatusBar = "#F44336";
    }
    if(this.typeColor == "value2"){
      this.colorStatusBar = "#66BB6A";
    }
    if(this.typeColor == "value3"){
      this.colorStatusBar = "#9E9E9E";
    }

    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
          console.log(this.colorStatusBar) // undefined
          statusBar.backgroundColorByHexString(this.colorStatusBar);
    }
}

Answer 1

我只能让它按如下方式工作:

import { Component } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';

...

typeColor: string;
constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public statusBar: StatusBar,
    public platform: Platform){

        this.typeColor = this.navParams.get('type');
        this.platform.ready().then(() => {
            if(this.typeColor == "value1"){
                statusBar.backgroundColorByHexString("#F44336");
            }
            if(this.typeColor == "value2"){
                statusBar.backgroundColorByHexString("#66BB6A");
            }
            if(this.typeColor == "value3"){
                statusBar.backgroundColorByHexString("#9E9E9E");
            }
        })
}

...