javascript - ngx-translate innerHTML styling - Stack Overflow

admin管理员组

文章数量:1026664

I using Angular 5.0.1 and ngx-translate/core 8.0.0

I have this code in template

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

and this string in en.json

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

and this code in my less file

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

but color for inner "a" will not apply because Angular create this styles

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

but ngx-translate create this code

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

and "a" tag doesn't have necessary attribute.

So how I can render [innerHTML] template after translation?

I using Angular 5.0.1 and ngx-translate/core 8.0.0

I have this code in template

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

and this string in en.json

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

and this code in my less file

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

but color for inner "a" will not apply because Angular create this styles

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

but ngx-translate create this code

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

and "a" tag doesn't have necessary attribute.

So how I can render [innerHTML] template after translation?

• javascript
• angular
• ngx-translate

Share Improve this question Follow edited Nov 21, 2017 at 13:50 Ruslan asked Nov 21, 2017 at 13:13 RuslanRuslan 10822 silver badges88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You have to change Encapsulation mode of your ponent.

Check this question, it had similar problem.

Encapsulation

I using Angular 5.0.1 and ngx-translate/core 8.0.0

I have this code in template

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

and this string in en.json

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

and this code in my less file

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

but color for inner "a" will not apply because Angular create this styles

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

but ngx-translate create this code

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

and "a" tag doesn't have necessary attribute.

So how I can render [innerHTML] template after translation?

I using Angular 5.0.1 and ngx-translate/core 8.0.0

I have this code in template

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

and this string in en.json

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

and this code in my less file

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

but color for inner "a" will not apply because Angular create this styles

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

but ngx-translate create this code

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

and "a" tag doesn't have necessary attribute.

So how I can render [innerHTML] template after translation?

• javascript
• angular
• ngx-translate

Share Improve this question Follow edited Nov 21, 2017 at 13:50 Ruslan asked Nov 21, 2017 at 13:13 RuslanRuslan 10822 silver badges88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You have to change Encapsulation mode of your ponent.

Check this question, it had similar problem.

Encapsulation

本文标签： javascriptngxtranslate innerHTML stylingStack Overflow