Angular 2 - innerHTML styling

Question

Я получаю куски HTML-кодов из HTTP-вызовов. Я помещал блоки HTML в переменную и вставлял ее на мою страницу с помощью [innerHTML], но я не могу стилизовать вставленный блок HTML. Есть ли у кого-нибудь предложение, как я могу это достичь?

@Component({selector: 'calendar', 
template: '<div [innerHTML]="calendar"></div>', 
providers:[HomeService], 
styles: [` 
h3 {color:red;} 
`}) 

HTML, который я хочу создать, это блок, содержащийся в переменной «календарь».

Answer 1

обновление :: нг-глубоко

/deep/ был устаревшим и заменен ::ng-deep.

::ng-deep также отмечен устаревшим, но его еще нет в наличии.

Когда ViewEncapsulation.Native должным образом поддерживается всеми браузерами и поддерживает стилизацию по границам DOM теневой границы, ::ng-deep, вероятно, будет прекращен.

оригинального

Угловые добавляют все виды классов CSS к HTML он добавляет к DOM, чтобы эмулировать тень DOM CSS инкапсуляцию, чтобы предотвратить стили кровоизлияния в и из компонентов. Angular также перезаписывает CSS, который вы добавляете, чтобы соответствовать этим добавленным классам. Для HTML, добавленного с использованием [innerHTML], эти классы не добавляются, а переписанный CSS не совпадает.

Как обходной путь попробовать

• для CSS добавлен к компоненту

/* :host /deep/ mySelector { */ 
:host ::ng-deep mySelector { 
    background-color: blue; 
} 

• для CSS добавлены index.html

/* body /deep/ mySelector { */ 
body ::ng-deep mySelector { 
    background-color: green; 
} 

>>> (и эквивалент /deep/ но /deep/ лучше работает с SASS) и ::shadow были добавлены в 2.0.0-beta.10. Они похожи на теневые компиляторы DOM CSS (которые устарели) и работают только с encapsulation: ViewEncapsulation.Emulated, который по умолчанию используется в Angular2. Они, вероятно, также работают с ViewEncapsulation.None, но затем игнорируются только потому, что они не нужны. Эти комбинаторы являются лишь промежуточным решением до тех пор, пока не поддерживаются более продвинутые функции для кросс-компонентного стиля.

Другой подход заключается в использовании

@Component({ 
    ... 
    encapsulation: ViewEncapsulation.None, 
}) 

для всех компонентов, которые блокируют ваш CSS (в зависимости от того, где вы добавляете CSS и где HTML является то, что вы хотите стиль - может быть все компоненты в приложение)

Update

Example Plunker