添加自定义样式并计算 innerHTML答案

【问题标题】：Add customized styles and count innerHTML添加自定义样式并计算 innerHTML
【发布时间】：2017-07-24 15:11:49
【问题描述】：

我需要定义一个 css 样式，比如<special> </special>，

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

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

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

虽然我的<special> 仍然无法正常工作，但现在控制台中的错误不再显示。

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

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

顺便说一句，我也尝试使用 css 类，这也不起作用...

.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 是什么吗？

【问题讨论】：

您需要使用自定义元素吗？你可以只使用一个类，然后设置它的样式吗？
确实，必须首先定义自定义元素，而且在 IMO 中很少是一个好主意。
developer.mozilla.org/en-US/docs/Web/Web_Components/…
@Olian04 我刚试过，没用 - 我没有在 Chrome 开发者工具的 css 元素中看到 <special>。这很奇怪
_ngcontent-c4 是 andular 发挥其魔力的一部分，不要费心去理解为什么。但是，如果您的类的 div 确实存在于 DOM 中，那么问题出在其他地方。看看你的 css，也许你错过了什么。

标签： javascript html css angular2-template innerhtml

【解决方案1】：

这是一种使用类来设置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>

【讨论】：