Otrzymuję fragmenty kodów HTML z wywołań HTTP. Umieszczam bloki HTML w zmiennej i wstawiam je na mojej stronie za pomocą [innerHTML], ale nie mogę nadać stylu wstawionemu blokowi HTML. Czy ktoś ma jakieś sugestie, jak mogę to osiągnąć?
@Component({selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers:[HomeService],
styles: [`
h3 {color:red;}
`})
HTML, do którego chcę nadać styl, to blok zawarty w zmiennej „calendar”.
index.html
?can not style the inserted HTML block
? Pokaż nam, co dla tego zrobiliśmy, za pomocą małego fragmentu kodu.Odpowiedzi:
aktualizacja 2
::slotted
::slotted
jest teraz obsługiwany przez wszystkie nowe przeglądarki i może być używany zViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
aktualizacja 1 :: ng-deep
/deep/
został wycofany i zastąpiony przez::ng-deep
.::ng-deep
jest już oznaczony jako przestarzały, ale nie ma jeszcze dostępnego zamiennika.Kiedy
ViewEncapsulation.Native
jest prawidłowo obsługiwany przez wszystkie przeglądarki i obsługuje style poza granicami Shadow DOM,::ng-deep
prawdopodobnie zostanie wycofany.oryginalny
Angular dodaje wszystkie rodzaje klas CSS do kodu HTML, który dodaje do DOM, aby emulować enkapsulację CSS shadow DOM, aby zapobiec pojawianiu się i wylewaniu stylów z komponentów. Angular również przepisuje dodany CSS, aby pasował do tych dodanych klas. Dla HTML dodanego przy użyciu
[innerHTML]
tych klas nie są one dodawane, a przepisany CSS nie pasuje.Aby obejść ten problem, spróbuj
index.html
>>>
(i odpowiednik,/deep/
ale/deep/
działa lepiej z SASS) i::shadow
zostały dodane w wersji 2.0.0-beta.10. Są podobne do kombinatorów Shadow DOM CSS (które są przestarzałe) i działają tylko zencapsulation: ViewEncapsulation.Emulated
tymi, które są domyślne w Angular2. Prawdopodobnie też z nimi współpracująViewEncapsulation.None
ale są wtedy ignorowane tylko dlatego, że nie są konieczne. Te kombinatory są tylko rozwiązaniem pośrednim, dopóki nie będą obsługiwane bardziej zaawansowane funkcje stylizacji między komponentami.Innym podejściem jest użycie
dla wszystkich komponentów, które blokują CSS (w zależności od tego, gdzie dodasz CSS i gdzie HTML chcesz nadać styl - mogą to być wszystkie komponenty w Twojej aplikacji)
Aktualizacja
Przykład Plunker
źródło
/deep/
zamiast>>>
inneeHTML
Prostym rozwiązaniem, którego musisz przestrzegać, jest
źródło
Jeśli próbujesz stylizować dynamicznie dodawane elementy HTML wewnątrz składnika Angular, może być to pomocne:
Domyślam się, że konwencja dla tego atrybutu nie jest gwarantowana jako stabilna między wersjami Angulara, więc można napotkać problemy z tym rozwiązaniem podczas aktualizacji do nowej wersji Angulara (chociaż aktualizacja tego rozwiązania byłaby prawdopodobnie trywialna w tym walizka).
źródło
Często pobieramy treści z naszego CMS jako
[innerHTML]="content.title"
.styles.scss
Umieszczamy niezbędne klasy w głównym pliku aplikacji, a nie w pliku scss komponentu. Nasz CMS celowo usuwa style in-line, więc musimy mieć przygotowane klasy, które autor może wykorzystać w ich treści. Pamiętaj, że użycie{{content.title}}
w szablonie nie spowoduje renderowania html z treści.źródło
Jeśli używasz Sass jako preprocesora stylu, możesz przełączyć się z powrotem na natywny kompilator Sass w celu uzyskania zależności od deweloperów:
npm install node-sass --save-dev
Abyś mógł nadal używać / deep / do programowania.
źródło