ngx-translate innerHTML样式

Question

我使用Angular 5.0.1和ngx-translate / core 8.0.0

我在模板中有这个代码

<p [innerHTML]="'privacyAgree'|translate:{href:'#'}"></p>

和en.json中的这个字符串

"privacyAgree": "Clicking «Registration» button, I accept<a href=\"{{href}}\">the terms</a>"

这个代码在我的文件中

p{
    color: #8A8C8D;
    font-size: 13px;
    line-height: 1.4em;
    a{
        color: #222222;
    }
}

但内部“a”的颜色将不适用，因为Angular会创建此样式

p[_ngcontent-c3] {
  color: #8A8C8D;
  font-size: 13px;
  line-height: 1.4em;
}
p[_ngcontent-c3]   a[_ngcontent-c3] {
  color: #222222;
}

但ngx-translate创建此代码

<p _ngcontent-c3="">Clicking «Registration» button, I accept<a href="#">the terms</a></p>

和“a”标签没有必要的属性。

那么我如何在翻译后渲染[innerHTML]模板呢？

Answer 1

您必须更改组件的Encapsulation模式。

检查这个问题，它有类似的问题。

Encapsulation