Добавляйте индивидуальные стили и подсчитывайте innerHTML

Мне нужно определить стиль 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, который тоже не работает...

.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?


javascript html css innerhtml angular2-template
person Charles Zha    schedule 24.07.2017    source источник
comment
Вам нужно использовать пользовательский элемент? Можете ли вы просто использовать класс, а затем стилизовать его?   -  person Olian04    schedule 24.07.2017
comment
Действительно, пользовательские элементы должны быть определены сначала и редко являются хорошей идеей, IMO.   -  person Paulie_D    schedule 24.07.2017
comment
developer.mozilla.org/en-US/docs/Web/Web_Components/   -  person Paulie_D    schedule 24.07.2017
comment
@Olian04 Olian04 Я только что попробовал, не работает - я не видел этого <special> в элементе css в инструментах разработчика Chrome... это странно   -  person Charles Zha    schedule 24.07.2017
comment
_ngcontent-c4 является частью того, что Andular делает, чтобы творить чудеса, не беспокойтесь о том, почему. Однако, если div с вашим классом существует в DOM, то проблема заключается в другом. Взгляните на свой css, может быть, вы что-то упустили.   -  person Olian04    schedule 24.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Это один из способов сделать это, используя класс для стилизации вашего элемента 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>

person Olian04    schedule 24.07.2017