Angular 2 - wewnętrzna stylizacjaHTML

Question

Dostaję fragmenty kodów HTML z wywołań HTTP. Umieściłem bloki HTML w zmiennej i wstawiłem ją na moją stronę z [innerHTML], ale nie mogę ustawić wstawionego bloku HTML. Czy ktoś ma jakieś sugestie, w jaki sposób mogę to osiągnąć?

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

HTML, który chcę stylu jest blok zawarty w zmiennej „kalendarza”.

Answer 1

zmiana :: ng głęboko

/deep/ była przestarzała i zastąpiona ::ng-deep.

::ng-deep również jest już oznaczony jako przestarzały, ale nie ma jeszcze zamiennika.

Gdy ViewEncapsulation.Native jest poprawnie obsługiwany we wszystkich przeglądarkach i obsługuje stylowanie w poprzek granic DOM, ::ng-deep prawdopodobnie przestanie działać.

oryginalny

kątowa dodaje wszystkie rodzaje klas CSS do HTML to dodaje DOM do naśladowania cień DOM CSS enkapsulacji aby zapobiec style krwawienia i poza składnikami. Angular również przepisuje CSS, które dodajesz, aby pasowały do ​​tych dodanych klas. W przypadku kodu HTML dodanego przy użyciu [innerHTML] te klasy nie są dodawane, a przepisany kod CSS nie jest zgodny.

jako obejście spróbować

• dla CSS dodany do komponentu

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

• CSS dodanego do index.html

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

>>> (a ekwiwalent /deep/ ale /deep/ działa lepiej SASS) i ::shadow dodano 2.0.0-beta.10. Są one podobne do kombinatorów DOM CSS shadow (które są przestarzałe) i działają tylko z encapsulation: ViewEncapsulation.Emulated, która jest domyślna w Angular2. Prawdopodobnie działają również z ViewEncapsulation.None, ale są następnie ignorowane, ponieważ nie są konieczne. Te kombinatory są tylko rozwiązaniem pośrednim, dopóki nie są obsługiwane bardziej zaawansowane funkcje dla stylów między komponentami.

Innym podejściem jest użycie

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

dla wszystkich składników, które blokują CSS (w zależności od tego, gdzie dodać CSS i gdzie HTML jest to, że chcesz stylu - może być wszystkie podzespołów w aplikacja)

Aktualizacja

Example Plunker