添加自定义样式并统计 innerHTML

Question

我需要定义一个 css 风格，比如 <special> </special>,

special { 
   color: #000000;
   background: #ffff00;
}

并在 innerHTML 中使用它。然而在 angular 中似乎并不容易，因为它有消毒方法。我尝试通过以下方式使用它，

result = this.sanitizer.bypassSecurityTrustHtml(result.trim());

现在控制台中的错误不再出现，尽管我的 <special> 仍然无法正常工作。

另外，当使用字符串统计字数时，result.length会简单地包括<special>Hi</special>的所有字符，而不仅仅是Hi。

如何使用我的 <special> 样式并计算显示的真实字符数？谢谢。

顺便说一句，我也尝试使用 css class，但它也不起作用...

.special { 
   color: #000000;
   background: #ffff00;
}

连同

<div class="special"> Hi </div>

在 innerHTML 的字符串中。

<div class="special"> Hi </div> 不使用 innerHTML 时效果很好，在 Chrome 开发者工具中显示为 <div _ngcontent-c4 class="special">Hi</div> 知道 _ngcontent-c4 是什么吗？

Answer 1

这是使用 class 设置 special 元素样式的一种方法。

.special {
  display: inline;
  color: orangered;
}

<html ng-app>
  <script type="text/javascript"
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
    </script>

  <input type="text" ng-model="sometext" /> <!--Proof that this is angualar-->
  <h1>Hello <div class="special">{{ sometext }}</div> </h1>
  
</html>

添加自定义样式并统计 innerHTML

Add customized styles and count innerHTML

html

javascript

css

innerhtml

angular2-template