我从服务器获取了一个颜色字符串,并将动态更改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>
但是它不起作用。 如何动态更改颜色?
答案 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>