角度4のグローバルスタイルの変更

Question

私はangular4でブートストラップを使用したいと思いますが、RTLスタイリングをサポートする必要があります。ブートストラップには正式なサポートはありません。パッチを提供するいくつかのgithubプロジェクトがあります。昔、RTL言語を選択したときにjqueryを使用してその場でスタイルを変更しました。どのように角4で同じことをする必要があります。一般的に、スタイルに基づいてhtmlディレクトリのプロパティを変更し、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); 
    } 
    } 
} 

、AppModuleで提供RtlService、およびその他のコンポーネントで、変更したいです方向はRtlServiceを挿入してsetModeメソッドを呼び出します。