Ionic framework 离子导航条颜色

我从我的服务器获得一个颜色字符串，并将动态更改ion导航栏背景导航栏。如何将导航栏bg颜色设置为变量字符串中的颜色

我知道在variables.scss中使用固定定义的颜色是可能的，但我只是从服务器获取颜色字符串，例如“00000”，因此我以前无法将其添加到variable.scss中

我厌倦了这样的事情：

<ion-header>
   <team-header [teamColor]="team.teamColor"></team-header>
</ion-header>

--------teamheader.html------------------------------

<ion-navbar [style.background-color]="teamColor">
...
</ion-navbar>

...

但它不起作用。

---

如何动态更改颜色？

这似乎远不理想，我不建议使用服务器端代码来确定样式，但在任何情况下，您都可以尝试

<ion-header>
   <team-header [color]="teamColor"></team-header>
</ion-header>

---

也许这不是最好的解决方案，但当我更改

title

类的属性backgroundcolor时，它对我很有效

home.html

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

---

谢谢你的回答。不幸的是。它不起作用：（.我从服务器获取团队信息，每个团队都有自己的团队颜色。当我打开团队详细信息时，我想将导航栏的颜色更改为团队颜色。它看起来很有趣。谢谢，我将尝试：）

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

import { Component, ElementRef } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

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

export class HomePage {

    constructor(public navCtrl: NavController,
        public platform: Platform,
        public element: ElementRef) {

        this.platform.ready().then(() => {
            let el = this.element.nativeElement
            el = document.getElementsByClassName("title")[0]
            el.style.background = 'red';
        })

    }

}