将模板传递给模态组件时，宿主上下文在角度8中不起作用

问题描述

我有警报组件，其中有模板，并将此模板传递给模式服务，我想为rtl和ltr设置警报组件的样式，rtl和ltr在body标签中作为className

alert.component.html

<ng-template #test >
  <div class="message" >
    <div>this is message</div>
  </div>
</ng-template>

alert.component.ts

 ...
 ///
  @ViewChild('alert',{static:true}) alert:Template<any>
  /// some code
  this.modal.open(this.alert).then(()=>{
  })

alert.component.scss

.message{
 color:green;
}
::host-context .rtl{
  .message{
   color:red;
 }
}

但是我检查我没有看到任何.rtl.message css类，由于模板，主机上下文似乎无法工作

解决方法

尝试以下操作：

:host-context(.rtl) .message { 
    color:red;
}

Stackblitz Here