Question

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

问题：如果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或global.scss中进行了以下测试，并且效果很好，也许您正在尝试将componentA的样式写到componentB上，那给你带来了问题。

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