Я получаю фрагменты HTML-кодов из HTTP-вызовов. Я помещаю блоки HTML в переменную и вставляю ее на мою страницу с помощью [innerHTML], но не могу стилизовать вставленный блок HTML. У кого-нибудь есть предложения, как мне этого добиться?
@Component({selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers:[HomeService],
styles: [`
h3 {color:red;}
`})
HTML-код, который я хочу оформить, представляет собой блок, содержащийся в переменной «calendar».
index.html
?can not style the inserted HTML block
? Покажите нам, что сделали для этого с небольшим фрагментом кода.Ответы:
обновление 2
::slotted
::slotted
теперь поддерживается всеми новыми браузерами и может использоваться сViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
обновление 1 :: ng-deep
/deep/
был устаревшим и заменен::ng-deep
.::ng-deep
также уже помечен как устаревший, но пока нет замены.Когда
ViewEncapsulation.Native
все браузеры должным образом поддерживаются и поддерживают стилизацию по теневым границам DOM,::ng-deep
вероятно, будут прекращены.оригинал
Angular добавляет все виды CSS-классов в HTML-код, который он добавляет в DOM, чтобы эмулировать инкапсуляцию теневого DOM CSS для предотвращения появления стилей в компонентах. Angular также переписывает CSS, который вы добавляете, для соответствия этим добавленным классам. Для HTML, добавленного с использованием
[innerHTML]
этих классов, не добавляются и переписанный CSS не совпадает.В качестве обходного пути попробуйте
index.html
>>>
(и аналог,/deep/
но/deep/
лучше работает с SASS) и::shadow
были добавлены в 2.0.0-бета.10. Они похожи на CSS-комбинаторы теневого DOM (которые устарели) и работают только с тем,encapsulation: ViewEncapsulation.Emulated
который используется по умолчанию в Angular2. Они, вероятно, также работают,ViewEncapsulation.None
но игнорируются только потому, что в этом нет необходимости. Эти комбинаторы являются лишь промежуточным решением, пока не поддерживаются более продвинутые функции для многокомпонентного стиля.Другой подход заключается в использовании
для всех компонентов, которые блокируют ваш CSS (зависит от того, где вы добавляете CSS и где находится HTML, который вы хотите стилизовать - это могут быть все компоненты в вашем приложении)
Обновить
Пример Плункер
источник
/deep/
вместо>>>
inneeHTML
Простое решение, которому вы должны следовать,
источник
Если вы пытаетесь стилизовать динамически добавленные элементы HTML внутри компонента Angular, это может быть полезно:
Я предполагаю, что соглашение об этом атрибуте не гарантируется стабильным между версиями Angular, поэтому при обновлении до новой версии Angular могут возникнуть проблемы с этим решением (хотя обновление этого решения, вероятно, будет тривиальным в этом кейс).
источник
Мы часто загружаем контент из нашей CMS as
[innerHTML]="content.title"
. Мыstyles.scss
помещаем необходимые классы в корневой файл приложения, а не в файл scss компонента. Наша CMS намеренно удаляет встроенные стили, поэтому мы должны подготовить классы, которые автор может использовать в своем контенте. Помните, что использование{{content.title}}
в шаблоне не будет отображать HTML из содержимого.источник
Если вы используете sass в качестве препроцессора стиля, вы можете переключиться обратно на собственный компилятор Sass для зависимости dev:
npm install node-sass --save-dev
Так что вы можете продолжать использовать / deep / для разработки.
источник