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>"

以及我的 less 文件中的这段代码

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 模式。

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