Question

我有导航栏组件，我想使用来自TypeScript文件中REST的颜色值来更改背景颜色。但是我不知道怎么做到。

任何想法？

Answer 1

您可以使用JS进行以下操作：

let element: any = document.getElementsByClassName(toolbar-background);
element[0].style.background = "#fff";

Answer 2

在模板中，您可以像这样使用绑定：

<ion-header>
    <ion-navbar [style.color]="myNavbarColor">
        <ion-title>Example</ion-title>
     </ion-navbar>
</ion-header>

然后在ts中可以以十六进制格式分配颜色：

myNavbarColor: string = “#FFFFFF

现在，一旦您从API获取颜色值，就可以通过绑定变量进行分配：

// inside your api call response:
this.myNavbarColor = //here you put your color hex value.

Answer 3

请使用Renderer2。在多平台上更加安全，灵活。

在此article中解释了直接DOM访问不好的问题，

当需要直接访问DOM时，将此API作为最后的手段。允许直接访问DOM可以使您的应用程序更容易受到XSS攻击。仔细检查代码中对ElementRef的任何使用。改用Angular提供的模板和数据绑定。另外，您可以看一下Renderer，它提供了即使不支持直接访问本机元素也可以安全使用的API。

用法

import {Component, Renderer2} from '@angular/core';

@Component(//skip)
class Page{
  constructor(public renderer: Renderer2) {}
  changeBackgroundColor(){
    this.renderer.setStyle(document.getElementsByClassName('toolbar-background')[0],'background-color',"blue")
  }
}

Ionic 3-如何在ts文件中更改navBar背景

3 个答案: