Question

我有一个棱角分明的应用程序。该应用程序支持rtl和ltr布局的多种语言。布局将根据用户的语言更改而更改。

我有两个SCSS文件，每个方向一个。我想根据变量的值加载其中之一。我迷路了，我不知道应该在哪里做。此类问题的最佳做法是什么？

谢谢！

Answer 1

您可以创建一个rtl，ltr之类的类标志，并将所选主题（scss文件）导入到类的主体中，这意味着该类出现时将应用特定主题。

_ltr.scss

h1 {
  background: #4285f4;
  color:#fff;
  text-align: left;
}

_rtl.scss

h1 {
  background: #ea4335;
  color:#fff;
  text-align: right;
}

style.scss

.rtl {
 @import "theme/_rtl.scss"
}

.ltr {
 @import "theme/_ltr.scss"
}

已编译的style.scss

.rtl h1 {
    background: #ea4335;
    color: #fff;
    text-align: right
}

.ltr h1 {
    background: #4285f4;
    color: #fff;
    text-align: left
}

app.component.html

<div>Selected theme :
    <select [(ngModel)]="selectedTheme"> 
    <option value="rtl">RTL</option>
    <option value="ltr">LTR</option>
  </select>
</div>

<div [class]="selectedTheme">
    ....
</div>

stackblitz demo

Answer 2

您不能（或者，在运行时加载不同的.scss文件是没有意义的，因为首先需要将它们编译为CSS才能在浏览器中工作。

另一个答案显示了bundling both versions of styles两种布局的实现方法，但是根据您的代码组织，这可能会导致很多重复，这可能不理想。

其他选项包括：

对差异使用内联样式，并通过绑定语法进行更改；例如。 [style.text-align]="direction";
使用custom properties确定文本方向；您可能还需要根据样式的性质使用conditional statements in CSS
如果您使用的是构建时i18n（如果您要使用每种语言构建单独的应用程序，则用户必须重新下载该应用程序才能更改语言），则只需为这些应用程序使用不同的CSS文件< / li>

根据变量Angular 6 Typescript

2 个答案: