Angular / Typescript Введенные HTML и CSS не обновляются

Question

У меня есть код, который добавит окружающий диапазон и класс к определенным словам, которые я хочу выделить (изменить его цвет).

Вот app.component.html:

<div id="editor" contenteditable="true" (keyup)="highLight($event)"></div>

А не КСС:

#editor {
    width: 400px;
    height: 100px;
    padding: 10px;
    background-color: #444;
    color: white;
    font-size: 14px;
    font-family: monospace;
}

.statement {
    color: orange;
}

Наконец, вот app.component.ts с методом hightlight:

import { Component } from '@angular/core';
declare var $:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  highLight(e) {
    if (e.keyCode == 32){
      var text = $(this).text().replace(/[\s]+/g, " ").trim();
      var word = text.split(" ");
      var newHTML = "";

      $.each(word, function(index, value){
        switch(value.toUpperCase()){
          case "SELECT":
            newHTML += "<span class='statement'>" + value + "&nbsp;</span>";
          break;
          default: 
            newHTML += "<span class='other'>" + value + "&nbsp;</span>";
        }
      });

      $(this).html(newHTML);

      var child = $(this).children();
      var range = document.createRange();
      var sel = window.getSelection();
      // range.setStart(child[child.length - 1], 1);
      // range.collapse(true);
      // sel.removeAllRanges();
      // sel.addRange(range);
      // $(this)[0].focus(); 
    }
  }



}

Когда я набираю SELECT, а затем пробел, к нему добавляются span и class, называемые оператором, так что проблема в том, что он не меняет цвет.

Итак, хотя span и класс есть, он не был обновлен, поэтому SELECT не становится оранжевым.

В чем проблема с этим? Как я могу исправить эту проблему?

Answer 1

Проблема заключается в инкапсуляции стилей - вашим стилям компонентов предшествуют такие атрибуты, как _nghost-c23.Вы действительно не должны делать это так, хотя, это очень не угловой способ делать вещи.