角度4全球风格的变化

Question

我想使用带有angular4的bootstrap，我还需要支持RTL样式，在bootstrap中还没有官方支持。有几个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方法。