Mam komponent w Angular 2 o nazwie my-comp:
<my-comp></my-comp>
Jak stylizuje się element główny tego komponentu w Angular 2?
W Polymer użyłbyś selektora „: host”. Próbowałem w Angular 2. Ale to nie działa.
:host {
display: block;
width: 100%;
height: 100%;
}
Próbowałem także użyć komponentu jako selektora:
my-comp {
display: block;
width: 100%;
height: 100%;
}
Oba podejścia wydają się nie działać.
Dzięki.
css
angular
css-selectors
angular-components
Ravi Teja Gudapati
źródło
źródło
my-selector { color : red}
w moim css i działa dobrze.Odpowiedzi:
Wystąpił błąd, ale w międzyczasie został naprawiony.
:host { }
teraz działa dobrze.Obsługiwane są również
:host(selector) { ... }
dlaselector
dopasować atrybuty, zajęcia ... na elemencie przyjmującym:host-context(selector) { ... }
dlaselector
pasujące elementy, klas ... W komponentów rodzicielskichselector /deep/ selector
(aliasselector >>> selector
nie działa z SASS), aby style pasowały do granic elementówAKTUALIZACJA: SASS jest przestarzałe
/deep/
.Angular (TS i Dart) dodane
::ng-deep
jako zamiennik, który jest również kompatybilny z SASS.UPDATE2:
::slotted
::slotted
jest teraz obsługiwany przez wszystkie nowe przeglądarki i może być używany z `ViewEncapsulation.ShadowDomhttps://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
Zobacz także Ładowanie zewnętrznego stylu css do Angular 2 Component
/deep/
i nie>>>
mają na nie wpływu te same kombinatory selektorów, co w Chrome, które są przestarzałe.Angular emuluje je (przepisuje) i dlatego nie zależy od obsługiwanych przeglądarek.
Jest to również powód
/deep/
i>>>
nie działa,ViewEncapsulation.Native
który włącza macierzysty cień DOM i zależy od obsługi przeglądarki.źródło
@Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}
ViewEncapsularion.Emulated
(domyślnie), ale nie zNative
.:host { p { font-size: 80%; } }
do pracy w pliku ... component.css. Gdy tylko spróbuję go użyć,styles: [:host { p { font-size: 80%; } }]
przestanie działać. Bardzo dziwny.Znalazłem rozwiązanie, jak stylizować tylko element składowy. Nie znalazłem żadnej dokumentacji, jak to działa, ale możesz umieścić wartości atrybutów w dyrektywie komponentowej pod właściwością „host” w następujący sposób:
AKTUALIZACJA: Jak wspomniał Günter Zöchbauer, wystąpił błąd, a teraz możesz stylizować element hosta nawet w pliku css, tak jak to:
źródło
!important
do zastąpienia). Musi być lepszy waayy: \host{}
wstylesUrl
pliku nie działa. potrzebuje:host
.@HostBinding('style.background-color') private color = 'lime';
Google znajdzie dla ciebie wiele przykładów i artykułów.Sprawdź ten problem . Myślę, że błąd zostanie rozwiązany po wdrożeniu nowej logiki prekompilacji szablonu . Na razie myślę, że najlepiej, co możesz zrobić, to owinąć szablon
<div class="root">
i nadać mu styldiv
:Zobacz ten plunker
źródło
W swoim komponencie możesz dodać .class do elementu hosta, jeśli masz jakieś ogólne style, które chcesz zastosować.
źródło
Dla każdego, kto chce stylizować elementy podrzędne
:host
tutaj, jest przykład użycia::ng-deep
:host::ng-deep <child element>
na przykład
:host::ng-deep span { color: red; }
Jak powiedzieli inni,
/deep/
jest przestarzałeźródło
Wypróbuj: host> / deep /:
Dodaj następujące elementy do pliku parent.component.less
Zastąp element podrzędny aplikacji przez selektor podrzędny
źródło