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