角度4全球風格變化

Question

我想使用引導與angular4，我還需要支持RTL樣式，在bootstrap中還沒有官方的支持。有幾個github項目提供補丁。在過去，我使用jquery在有人選擇RTL語言時隨時更改樣式。我應該如何在角度做同樣的事情4.通常，我需要一個組件，它負責根據樣式更改html dir屬性以及更改CSS樣式。

由於我是一個新技術，如何做到這一點。什麼是正確的補丁，一個js小提琴的例子會很好。

在此先感謝

Answer 1

也許一個全球性的服務將幫助〜

rtl.service.ts

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

現在，供應商RtlService中的AppModule，和其他組件時，你想改變方向只是注入RtlService並調用setMode方法。