Rest 离子3-如何更改ts文件中的导航栏背景

我有navbar组件，我想在typeScript文件中使用REST中的颜色值来更改背景颜色。但我不知道该怎么做

---

anythink sugestion？？？

您可以使用JS制作如下内容：

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

---

您可以使用JS制作如下内容：

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

---

在模板中，您可以使用如下绑定：

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

现在，从API获得颜色值后，可以通过绑定变量进行分配：

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

---

在模板中，您可以使用如下绑定：

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

现在，从API获得颜色值后，可以通过绑定变量进行分配：

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

---

请使用

渲染器2

。它在多平台上更安全、更灵活

在这个例子中，直接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")
  }
}

---

请使用

渲染器2

。它在多平台上更安全、更灵活

在这个例子中，直接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")
  }
}

---

你能分享一些代码吗？你能分享一些代码吗？你的模式很好。但是他问了背景色的问题。也许你只是错过了。实际上，我测试了你的代码，但它不起作用，因为

是父元素，而cih有其他子组件。对于大多数其他简单元素，您的代码都是有效的。嘿，事实上，我的目标是显示模式，而不是精确的解决方案；）我希望作者能适应你的模式是好的。但是他问了背景色的问题。也许你只是错过了。实际上，我测试了你的代码，但它不起作用，因为

是父元素，而cih有其他子组件。对于大多数其他简单元素，您的代码都是有效的。嘿，事实上，我的目标是显示模式，而不是精确的解决方案；）我希望作者能修改它