时间戳

首页 > 解决方案 > IONIC 4 中的 LTR 和 RTL

angular - IONIC 4 中的 LTR 和 RTL

问题描述

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

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

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

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

encapsulation: ViewEncapsulation.None

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

谢谢您的帮助。

标签： angular

解决方案

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

:host-context 完整文档

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

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

推荐阅读