angular - 如何在 typescript/angular 中设置子 html 元素的样式

Question

我正在使用 ionic 3 构建混合移动应用程序，其中一项要求是用户能够动态更改工具栏颜色。呈现页面后，html 看起来像这样:

<div id="divICanControl"> //this div i can control
<div> //but this one is generated by the framework and this is the div that change the background color of the toolbar
</div>
</div>

我尝试执行以下操作: document.getElementById('divICanControl').childNodes[0].style.backgroundColor = this.someColor;

它偶尔会起作用，但会在 vscode 中产生以下错误: [ts] Property 'style' does not exist on type 'Node'.

它停止了应用程序的构建。

我现在正在寻找使用 angular 操作 dom 的正确方法。

感谢您的帮助，请记住我是 Angular 5 和 typescript 的新手。

Answer 1

推荐的元素样式化方法不是使用 document....style。它与渲染器。观察:

<div id="first">
    first
    <div id="second">
        second
    </div>
</div>

<button (click)="change()">Change</button>


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

    constructor(private renderer: Renderer2) { }

    change() {
        const parent: HTMLElement = document.getElementById('first');
        const child = parent.children[0];
        this.renderer.setStyle(child, 'background-color', 'red');
    }