Angular v2.4.7 [innerHtml] и [ngStyle] для одного и того же элемента

Я использую привязку [innerHTML], чтобы получить некоторый HTML-контент в div с очищающей трубкой, как описано здесь.

Мне также нужно иметь возможность динамически обновлять стили на основе пользовательского ввода (например, размер шрифта). Я использовал [ngStyle] для других элементов, но [ngStyle], похоже, плохо сочетается с [innerHTML]. Пользователь может обновить fontSizeVar, и правильный CSS можно найти в инспекторе браузера, но размер связанного содержимого [innerHTML] никогда не меняется. Мысли?

Шаблон:

  <div class='content'
       [ngStyle]='{ "font-size": fontSizeVar }'
       [innerHTML]='description | safeHtml'>
  </div>

javascript angular innerhtml
person trex    schedule 08.05.2017    source источник
comment
Хм... может быть, создать совершенно новый docfrag (или просто элемент), стилизованный и добавить его в обертывающий div (доступный как ViewChild)?   -  person Tim Consolazio    schedule 09.05.2017
comment
В текущих версиях работает нормально: embed.plnkr.co/FiQr8B   -  person jonrsharpe    schedule 09.05.2017
comment
Это может быть только тот случай, когда ваш внутренний html не наследует стили от своего родителя. Поправьте меня, если я ошибаюсь, но ngStyle применяет стили к элементу, в котором он находится.   -  person qwerty_igor    schedule 09.05.2017
comment
Похоже, содержимое [innerHTML] наследовалось неправильно, размер шрифта фиксировался каким-то другим css, который я предоставлял. Спасибо за помощь!   -  person trex    schedule 09.05.2017

Ответы (1)


arrow_upward
0
arrow_downward

Спасибо за помощь, я хотел оставить ответ на случай, если кто-то еще столкнется с этой проблемой.

У меня была таблица стилей, обеспечивающая исходные стили для привязанного содержимого [innerHTML]. [ngStyle] применяется к родительскому элементу и НЕ переопределяет стиль дочернего элемента, если он задан явно. Удаление стиля для дочернего элемента позволило наследованию работать правильно, решив мою проблему.

Спасибо еще раз!

person trex    schedule 09.05.2017