如何在innerText中修复样式

时间:2019-04-25 11:04:25

标签: html angular typescript

我需要使用prismJS高亮显示代码html,但是innertext没有考虑到\ n行的返回

<pre class="language-markup background-code"><code 
[innerText]="getHtmlCode()""></code> 

我与Arizonajs Angle 6一起工作

getHtmlCode() {
 <ng-container *ngIf="customRow" >
<td></td>
<td colspan="3">custom</td>
<td>row</td>
</ng-container>\n ` : '';
.....
}    

我一行中只有一个文本块,但是我看起来像是在编辑器中

1 个答案:

答案 0 :(得分:0)

您不能像<ng-container *ngIf="customRow" >那样附加HTML,因为它包含结构指令(*ngIf="customRow" https://angular.io/guide/structural-directives)。

但是,如果我理解您的问题正确,那么您只想在<code>内显示一个字符串,对吗?

<pre><code>
   {{genHtmlCode()}}
</code></pre>

您已经注意到,该函数仅被调用一次。要触发Angular在发生更改时自动进行渲染,您可能需要使用getter。

Component.ts>

class Whatever {
  get genHtmlCode(){
    return '';
  }
}

Component.html>

<pre><code>
   {{genHtmlCode}}
</code></pre>

注意:您不需要致电吸气剂。

如果现在要在此变量中设置值,则必须创建一个setter,否则它将不会设置(并且旧值仍然保留)。

set genHtmlCode(value){
  this._genHtmlCode = value;
}