IONIC 4 中的 LTR 和 RTL

Question

我在 ionic 4 中使用 ngx-translate 来添加不同的语言。在我的项目中，我有阿拉伯语。ngx-translate 功能运行良好。它正在改变目录动态html 标签的。

问题：如果 html 标签在每个组件中都有dir="rtl"，我想写一些样式。但是 angular 有默认封装，所以我无法在我的 component.scss 文件中编写如下样式。

html[dir="rtl"]{
  h3{
     color: red;
  }
}

我知道 angular 提供了封装更改属性，例如，

encapsulation: ViewEncapsulation.None

但是我不想利用封装的优势。

谢谢您的帮助。

Answer 1

有时根据组件视图之外的某些条件应用样式很有用。例如，可以将 CSS 主题类应用于文档<body>元素，并且您希望基于此更改组件的外观。

使用 :host-context() 伪类选择器，它的工作方式就像 :host() 的函数形式。:host-context() 选择器在组件宿主元素的任何祖先中查找 CSS 类，直到文档根。:host-context() 选择器在与另一个选择器结合使用时很有用。

:host-context(html[dir="rtl"]) ion-card-subtitle {
  background-color: #eef;
}

Answer 2

我已经对此进行了测试，但它工作正常，您是否注意到该值已正确添加到标签dir的属性中html？

component.scss我在 my或 in中做了以下测试，global.scss它运行得很好，也许您正在尝试将您的样式写入componentA您的样式componentB，这给您带来了问题。

html[dir="rtl"]{
    ion-card-subtitle{
        color: red;
    }
}