eckig 4 ​​global style change

Question

Ich möchte Bootstrap mit angular4 verwenden, ich muss auch RTL Styling unterstützen, im Bootstrap gibt es noch keine offizielle Unterstützung. Es gibt mehrere Github-Projekte, die Patches bereitstellen. In den alten Tagen habe ich jQuery verwendet, um die Styles im laufenden Betrieb zu ändern, wenn jemand die RTL-Sprache auswählt. Wie sollte ich das gleiche in eckigen 4. Im Allgemeinen brauche ich eine Komponente, die verantwortlich für die Änderung der HTML-Dir-Eigenschaften auf Stil sowie die Änderung der CSS-Stile.

Seit ich ein neues zu der Technologie, wie dies getan werden kann. Was sind die richtigen Patches, ein JS Geige Beispiel wäre großartig.

Vielen Dank im Voraus

Answer 1

Vielleicht ein globales Service würde ~

rtl.service.ts helfen

import { Inject, Injectable,Output } from '@angular/core'; 
import { DOCUMENT } from '@angular/platform-browser'; 
@Injectable() 
export class RtlService { 
    mode: 'normal' | 'rtl' = 'ltr'; 
    constructor(@Inject(DOCUMENT) private document: any) {} 
    @Output() modeChanged = new EventEmitter(); 
    insertCss(path) { 
     const head = this.document.getElementsByTagName('head')[0]; 
     let link = this.document.createElement('link'); 
     link.href = path; 
     link.rel = 'stylesheet'; 
     link.type = 'text/css'; 
     head.appendChild(link); 
    } 
    removeCss(path) { 
    const allStyles=this.document.getElementsByTagName('link'); 
    for (var i=allStyles.length; i>=0; i--){ 
     if (allStyles[i] && 
     allStyles[i].getAttribute('href')!=null && 
     allStyles[i].getAttribute('href').indexOf(path)!=-1) { 
     allStyles[i].parentNode.removeChild(allStyles[i]); 
    } 
    } 
    setDir() { 
    const htmlElement = this.document.getElementsByTagName('html')[0]; 
    htmlElement.setAttribute('dir', this.mode); 
    } 
    setMode(newMode) { 
    if (newMode === 'rtl' && newMode !== this.mode) { 
     // insert css file 
     this.insertCss('assets/rtl.css'); 
     this.mode = newMode; 
     this.setDir(); 
     this.modeChanged.emit(this.mode); 
    } else (newMode === 'ltr' && newMode !== this.mode) { 
     this.removeCss('assets/rtl.css'); 
     this.mode = newMode; 
     this.setDir(); 
     this.modeChanged.emit(this.mode); 
    } 
    } 
} 

Nun Anbieter RtlService in AppModule, und in einer anderen Komponente, wenn Sie ändern möchten, Die Richtung injizieren Sie einfach RtlService und rufen Sie die Methode setMode auf.