离子导航栏颜色动态

时间:2018-07-29 20:56:58

标签: ionic-framework sass

我从服务器获取了一个颜色字符串,并将动态更改ion-navbar背景navbar。如何将navbar bg颜色设置为可变字符串的颜色?

我知道在variables.scss中可以使用固定的定义颜色,但是我只是得到颜色字符串,例如来自服务器的“#00000”,因此我之前无法将其添加到variable.scss中。

我很累,像这样

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

-------- header.ts ---------------

@Component({
  selector: 'team-header',
  templateUrl: 'teamheader.html'
})

export class TeamheaderComponent {

@Input() teamColor;

constructor(public navCtrl: NavController, public viewCtrl: ViewController) {
}

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

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

但是它不起作用。 如何动态更改颜色?

2 个答案:

答案 0 :(得分:1)

也许这不是最好的解决方案,但是当我更改title类的属性backgroundcolor时,它对我有用。

home.html

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

home.ts

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

    }

}

答案 1 :(得分:0)

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

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