Typescript/Angular'da bir Child HTML öğesi nasıl stil verilir

Hibrit bir mobil uygulama oluşturmak için Ionic 3 kullanıyorum, gereksinimlerden biri kullanıcıya araç çubuğu rengini dinamik olarak değiştirme imkânı sağlamaktır. Sayfa render edildikten sonra HTML şöyle görünür:

<div id="divICanControl"> //bu div'i ben kontrol edebilirim <div> //ama bu olan framework tarafından üretilir ve bu div araç çubuğunun arka plan rengini değiştirir </div> </div>

Aşağıdakini yapmayı denedim: document.getElementById('divICanControl').childNodes[0].style.backgroundColor=this.someColor;

Bazen çalıştı ama VSCode'da aşağıdaki hatayı oluşturdu: [ts] 'Node' türünde 'style' özelliği yok.

ve uygulamanın derlemesini durdurdu.

Şu anda Angular kullanarak DOM'u manipüle etmenin doğru yolunu arıyorum.

Yardımınız için teşekkür ederim ve lütfen Angular 5 ve TypeScript konusunda yeni olduğumu unutmayın.

Cevap #1

Öğeleri stilize etmenin önerilen yolu document....style ile değil, renderer ile yapmaktır. Gözlemleyin:

<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');
    }

İlgili makaleler