離子2 - 動態改變狀態欄的顏色

Question

我試圖改變離子狀態欄的顏色取決於獲取的參數。

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"); 
      } 
     }) 
} 

... 

Answer 2

您可以通過（在constructior後運行）移動你的邏輯的ionViewDidLoad()內使用platform.ready()確保科爾多瓦做到這一點已經啓動了：

ionViewDidLoad() { 
    this.typeColor = this.navParams.get('type'); 

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

在這種情況下，你的構造函數更改爲：

constructor(public navCtrl: NavController, public navParams: NavParams, public statusBar: StatusBar, public platform: Platfom){ 
    // empty :), but notice the dependency injection of Platform 
} 

不要忘了頂部導入Platform：

import { Platform } from 'ionic-angular'; 

爲了您的具體的例子來工作，你需要確保你從父頁面調用此本頁面也通過在參數type！

所以在父頁面（你有沒有共享的代碼爲），你需要有這樣的事情：

export class ParentPage { 
    constructor(public navCtrl: NavController) { 
    } 

    pushPage(){ 
    // push another page onto the navigation stack 
    // causing the nav controller to transition to the new page 
    // optional data can also be passed to the pushed page. 
    this.navCtrl.push(MyStackOverflowSharedPage, { 
     type: "value2" 
    }); 
    } 
} 

欲瞭解更多信息對上NavController閱讀文檔。