应用十六进制值颜色 style.background-color答案

【问题标题】：Applying a hex value color style.background-color应用十六进制值颜色 style.background-color
【发布时间】：2017-12-11 16:41:13
【问题描述】：

我正在尝试在 ionic 中的导航栏上应用颜色，但我没有运气。这是我的代码。

 <ion-header>
   <ion-navbar [style.color]="(xdg|async)?.color">//outputs hex ex. #dda63a
     <ion-title>xdg</ion-title>
   </ion-navbar>
</ion-header>

但它不适用于导航栏。我还尝试在我的 navParams 中传递数据：

//<ion-navbar [style.color]="xdgColor">
this.xdgColor = this.navParams.get('xdgColor')
console.log(this.xdgColor)//#dda63a

也没有运气，我做错了什么？

【问题讨论】：

它应该是 xdgColor 和 [style.color]="xdgColor" 因为你的 xdgColor 对象中没有 color 作为属性
我也试过了，但没有运气
您是否可以在 teamviewer 或远程桌面中使用。以便我调试和帮助您
对不起，我没有。只是使用别人的笔记本电脑
chrome扩展好用不行吗？

标签： css angular ionic-framework background-color

【解决方案1】：

.ts

<ion-header>
   <ion-navbar [style.background-color]="xdgColor">
     <ion-title>xdg</ion-title>
   </ion-navbar>
</ion-header>

Ionic 在 ion-navbar 中创建另一个 div 来设置背景颜色。您可以通过将以下 css 添加到您的 app.scss 文件来覆盖它：

.header .toolbar-background{
    background: none;
}

现在，由于您已禁用 ionic 设置的背景颜色，您可以通过将此 CSS 也添加到您的 app.scss

来为导航栏设置默认背景颜色

ion-navbar.toolbar
    background-color: #f8f8f8;
}

【讨论】：