我想把我的文字的一部分加粗。
我从特定文件中获取文本。
"INFORMATION": "Here's an example of text",
我希望Here's an
大胆。
"INFORMATION": "<b>Here's an</b> example of text",
"INFORMATION": "<strong>Here's an</strong> example of text"
然后我打印出来
<span translate>INFORMATION</span>
而不是得到
这是一个文本示例
我明白了
<b>Here's an</b> example of text
要么
<strong>Here's an</strong> example of text
UPDATE
我正在尝试使用innerHTML
<span [innerHTML]="information | translate"></span>
信息是包含文本的变量
但它忽略了我的html标签,它只打印文本
我要做的是一个管道,它清理你给它的字符串,并使用正则表达式使其更通用。像这样stackblitz:
https://stackblitz.com/edit/angular-tyz8b1?file=src%2Fapp%2Fapp.component.html
import { Pipe, PipeTransform, Sanitizer, SecurityContext } from '@angular/core';
@Pipe({
name: 'boldSpan'
})
export class BoldSpanPipe implements PipeTransform {
constructor(
private sanitizer: Sanitizer
) {}
transform(value: string, regex): any {
return this.sanitize(this.replace(value, regex));
}
replace(str, regex) {
return str.replace(new RegExp(`(${regex})`, 'gi'), '<b>$1</b>');
}
sanitize(str) {
return this.sanitizer.sanitize(SecurityContext.HTML, str);
}
}
这样,变量内容实际上不会改变,这意味着您的数据保持不变。
如果你有angular-translate 2.0,你可以这样做。
<span translate="{{ 'INFORMATION' }}"></span>