ionic4 in how to modify the host style

Here take ion-select to do the test
ionViewDidEnter () { 
    // tslint: Next-disable-Line: variable-name 
    const select_elements = (this.el.nativeElement.querySelectorAll ( 'Ion-SELECT')); 
    const = `Styles 
      .Select {text- 
        Color: Red; 
      } 
    `; 
    select_elements.forEach ((Element) => { 
        this.injectStyles (Element, '.Select-text', styles); 
    }); 
} 

/ * methods can actually modify the style of a package common tools, to you toss it * / 
injectStyles ( 
    shadowRootElement: the HTMLElement, 
    insertBeforeSelector: String, 
    Styles: String 
) { 
    const = shadowRootElement.shadowRoot the root;  
    const newStyleTag = document.createElement ( 'style');
    newStyleTag.innerHTML = Styles;
    root.insertBefore(newStyleTag, root.querySelector(insertBeforeSelector));
}

 Remember Import  ElementRef

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

Reference blog: https://www.cnblogs.com/johnjackson/p/11927777.html

Guess you like

Origin www.cnblogs.com/0955xf/p/12220089.html