Переключение между двумя файлами sass в угловых - PullRequest
Новая
       8

Переключение между двумя файлами sass в угловых

0 голосов
/ 22 октября 2018

У меня есть, например, следующие файлы sass:

style.scss 

body{
  direction:$direction;
  text-align:$start-direction;
}

ltr.scss 

$direction: ltr;
$start-direction: left;
@import './style.scss';

rtl.scss 

$direction: rtl;
$start-direction: right;
@import './style.scss';

и сервис, который изменяет язык моего сайта, например:
service.ts: 

import { Injectable } from '@angular/core';

@Injectable()
export class LangToggler {
  lang:any='en';

  toggle(lang) {
   //Here I want to change my css file  **switch between `RTL` and `LTR`**
  }
}

Как я могу динамически переключаться между RTL и LTR файлами?
У кого-нибудь есть идея или лучшее решение?

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

У меня была проблема с Simillar, но с обычными CSS-файлами.Я был в ситуации, когда мне нужно было динамически изменить всю тему CSS, для всего проекта, основанного на цветах компании пользователей.Решение состояло в том, чтобы иметь вспомогательный класс, который проверял бы, является ли пользователь из компании 1, затем извлекает company1.css, если это из company2, то company2.css.Примерно так:

colorThemeHelper.ts 

 const FACEBOOK = 'facebook';
 const TWITTER  = 'twitter';

 export class ThemeLoader {
     static setCss(): void {
        let url = '';
        let user: User = LocalData.getUser();

        switch (user.company) {
            case FACEBOOK:
                url = 'assets/css/facebook.css';
                break;
            case TWITTER:
                url = 'assets/css/twitter.css';
                break;
            default:
                url = '';
        }
        (<HTMLLinkElement>document.getElementById('ELEMENT_PLACEHOLDER_CSS')).href=url;
      }
  }

Важно, чтобы в файле index.html у вас был тег ссылки с некоторым идентификатором (в моем случае "ELEMENT_PLACEHOLDER_CSS"), который вы можете получить ипоместите сгенерированный URL из метода выше в атрибут href этого элемента.

Чем после того, как пользователь вошел в систему, в некотором компоненте панели мониторинга в методе ngOnInit я бы вызвал функцию setCss!Я знаю, что это не самое элегантное решение, и вам нужно разделить css (или в вашем случае sass) файлы, но в моем случае это работает.Надеюсь, это поможет!

0 голосов
/ 22 октября 2018

Вы можете использовать ngClass.Вы можете поместить условие в ngClass и использовать разные классы для разных условий.Если вам нужна дополнительная информация, может помочь следующее: https://angular.io/api/common/NgClass

...