Question

我正在尝试在Ionic2中开发双语应用程序。语言为英语和阿拉伯语。我有两个CSS文件，一个是english.css，另一个是arabic.css，当从英语更改为阿拉伯语时，应删除english.css并在运行时添加arabic.css。有可能吗？

Answer 1

我刚刚遇到了同样的问题。事实证明，这并不是实现结果的最佳方式（加载和卸载样式表会在页面重新渲染时产生尴尬的效果）。您还希望定位rtl和ltr而不是单个语言，或者根据scss中的语言定义ltr-rtl变量。

相反，你应该在你的头部或你的身体/页面/组件中添加一个反映语言的类，并且对于基于所述常量构建的rtl语言具有那些（我想象的很少）查询。我只在自定义按钮栏组件上需要它，结果就像这样简单：

Liveservice（我的全球单身人士服务）

// this can be "rtl" or "ltr"
public rtlClass: string;

组件标记

<top-button-bar>
<div [ngClass]="liveService.options.rtlClass">
<ion-button>this will be centered, always</ion-button>
<ion-segment>
<ion-segment-button>1</ion-segment-button>
<ion-segment-button>2</ion-segment-button>
<ion-segment-button>3</ion-segment-button>
</ion-segment>
</div>
</top-button-bar>

现在的目的是让布局如下：

ltr: ___B123
rtl: 321B___

scss风格：

top-button-bar {
  .ltr {
     // scss code for ltr layout here
  }
  .rtl {
     // scss code for the rtl layout here
  }
}

使用angular和Ionic 2在运行时动态添加CSS样式表

1 个答案: