Mam element nadrzędny:
<parent></parent>
I chcę zapełnić tę grupę komponentami potomnymi:
<parent>
<child></child>
<child></child>
<child></child>
</parent>
Szablon nadrzędny:
<div class="parent">
<!-- Children goes here -->
<ng-content></ng-content>
</div>
Szablon podrzędny:
<div class="child">Test</div>
Ponieważ parent
i child
są to dwa osobne komponenty, ich style są zablokowane we własnym zakresie.
W moim komponencie nadrzędnym próbowałem:
.parent .child {
// Styles for child
}
Ale .child
style nie są stosowane do child
komponentów.
Próbowałem styleUrls
dołączyć parent
arkusz stylów do child
komponentu, aby rozwiązać problem z zakresem:
// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]
Ale to nie pomogło, próbowałem też w inny sposób, pobierając child
arkusz stylów do, parent
ale to też nie pomogło.
Jak więc stylizować komponenty potomne zawarte w komponencie macierzystym?
css
angular
angular-components
Chrillewoodz
źródło
źródło
Odpowiedzi:
Aktualizacja - najnowszy sposób
Nie rób tego, jeśli możesz tego uniknąć. Jak zauważa Devon Sans w komentarzach: Ta funkcja najprawdopodobniej będzie przestarzała.
Aktualizacja - nowsza droga
Od Angulara 4.3.0 wszystkie przebijające kombinatory css były przestarzałe. Zespół Angular wprowadził nowy kombinator
::ng-deep
(wciąż jest na poziomie eksperymentalnym, a nie na pełnej i końcowej drodze), jak pokazano poniżej,DEMO: https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview
Stara droga
Możesz użyć
encapsulation mode
i / lubpiercing CSS combinators >>>, /deep/ and ::shadow
przykład roboczy: http://plnkr.co/edit/1RBDGQ?p=preview
źródło
::ng-deep
jest teraz przestarzałe , nie polecam go używać w przyszłych aplikacjachAKTUALIZACJA 3:
::ng-deep
jest również przestarzałe, co oznacza, że nie powinieneś już tego robić. Nie jest jasne, w jaki sposób wpływa to na rzeczy, w których należy zastąpić style w komponentach podrzędnych z komponentu nadrzędnego. Wydaje mi się dziwne, jeśli zostanie to całkowicie usunięte, ponieważ jak wpłynęłoby to na biblioteki, w których należy przesłonić style w komponencie biblioteki?Skomentuj, jeśli masz wgląd w to.
AKTUALIZACJA 2:
Ponieważ
/deep/
wszystkie pozostałe selektory przebijające cień są teraz przestarzałe. Spadek kątowy,::ng-deep
który należy zastosować zamiast tego dla większej kompatybilności.AKTUALIZACJA:
Jeśli używasz Angular-CLI, musisz użyć
/deep/
zamiast tego,>>>
bo inaczej nie będzie działać.ORYGINALNY:
Po przejściu na stronę Github w Angular2 i przeprowadzeniu losowego wyszukiwania „stylu” znalazłem to pytanie: Angular 2 - stylizacja innerHTML
Który powiedział, aby użyć czegoś, co zostało dodane
2.0.0-beta.10
, selektorów>>>
i::shadow
.Po prostu robienie:
W
parent
„s pliku arkusza stylów rozwiązać ten problem. Należy pamiętać, jak stwierdzono w powyższym cytacie, to rozwiązanie jest tylko pośrednie, dopóki nie będzie obsługiwana bardziej zaawansowana stylizacja między komponentami.źródło
NIE powinieneś używać
::ng-deep
, jest przestarzałe. W Angular właściwym sposobem zmiany stylu komponentu dziecięcego od rodzica jest użycieencapsulation
(przeczytaj poniższe ostrzeżenie, aby zrozumieć konsekwencje):I wtedy będziesz mógł modyfikować css ze swojego komponentu bez potrzeby :: :: -g-deep
OSTRZEŻENIE: Wykonanie tej czynności sprawi, że wszystkie reguły css, które napiszesz dla tego komponentu, będą globalne.
Aby ograniczyć zakres twojego css tylko do tego komponentu, dodaj klasę css do górnego tagu twojego komponentu i umieść css „wewnątrz” tego tagu:
Plik scss:
źródło
::ng-deep
. Ogólnie rzecz biorąc, komponenty i tak mają swój własny selektor (<my-component>, <div my-component>
itp.), Więc nie ma nawet potrzeby stosowania elementu opakowania ze specjalną klasą.Niestety wygląda na to, że selektor / deep / jest przestarzały (przynajmniej w Chrome) https://www.chromestatus.com/features/6750456638341120
Krótko mówiąc, wydaje się, że nie ma (obecnie) długoterminowego rozwiązania innego niż jakoś sprawić, by element podrzędny stylizował rzeczy dynamicznie.
Możesz przekazać dziecku obiekt stylu i zastosować go przez:
<div [attr.style]="styleobject">
Lub jeśli masz określony styl, możesz użyć czegoś takiego:
<div [style.background-color]="colorvar">
Więcej dyskusji na ten temat: https://github.com/angular/angular/issues/6511
źródło
Miał ten sam problem, więc jeśli używasz angular2-cli ze scss / sass użyj '/ deep /' zamiast '>>>', ostatni selektor nie jest jeszcze obsługiwany (ale działa świetnie z css).
źródło
Jeśli chcesz być bardziej ukierunkowany na rzeczywisty komponent potomny, wykonaj następujące czynności. W ten sposób, jeśli inne komponenty potomne będą miały tę samą nazwę klasy, nie będzie to miało wpływu.
Plunker: https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p=preview
Na przykład:
Mam nadzieję że to pomoże!
kodematrix
źródło
W rzeczywistości jest jeszcze jedna opcja. Co jest raczej bezpieczne. Możesz użyć ViewEncapsulation.Nie ALE wstawić wszystkie style komponentów do jego znacznika (czyli selektora). Ale i tak zawsze preferuję styl globalny plus style zamknięte.
Oto zmodyfikowany przykład Denisa Rybalki:
źródło
Istnieje kilka opcji osiągnięcia tego w Angular:
1) Możesz używać głębokich selektorów css
2) Możesz również zmienić enkapsulację widoku, która jest domyślnie ustawiona na Emulowane, ale można ją łatwo zmienić na Natywny, który korzysta z implementacji natywnej przeglądarki Shadow DOM, w twoim przypadku wystarczy go wyłączyć
Na przykład: `
źródło
Nie powinieneś pisać reguł CSS dla elementów podrzędnych w komponencie nadrzędnym, ponieważ komponent Angular jest samodzielną jednostką, która powinna jawnie deklarować, co jest dostępne dla świata zewnętrznego. Jeśli układ potomny zmieni się w przyszłości, twoje style dla tych elementów potomnych rozproszonych w plikach SCSS innych składników mogą łatwo ulec uszkodzeniu, przez co twoja stylizacja będzie bardzo delikatna. Po to
ViewEncapsulation
jest w przypadku CSS. W przeciwnym razie byłoby tak samo, gdybyś mógł przypisać wartości do pól prywatnych jakiejś klasy z dowolnej innej klasy w programowaniu obiektowym.Dlatego należy zdefiniować zestaw klas, które można zastosować do podrzędnego elementu hosta i zaimplementować sposób, w jaki dziecko na nie reaguje.
Technicznie można to zrobić w następujący sposób:
Innymi słowy, używasz
:host
pseudoselektora dostarczonego przez Angular + zestaw klas CSS, aby zdefiniować możliwe style potomne w samym komponencie potomnym. Następnie możesz uruchomić te style z zewnątrz, stosując wstępnie zdefiniowane klasy do<child>
elementu hosta.źródło
parent.component.scss
związku ze stylizacją elementu potomnego. Jest to jedyny cel tego podejścia. Dlaczego musiszparent.component.scss
?ViewEncapsulation
tylko dlatego, że jego domyślna wartość prowadzi do pytania PO. Nie musisz przypisywać innegoViewEncapsulation
kodu, aby powyższy kod działał.Uważam, że o wiele czystsze jest przekazywanie zmiennej @INPUT, jeśli masz dostęp do kodu komponentu potomnego:
Chodzi o to, że rodzic mówi dziecku, jaki powinien być jego wygląd, a dziecko decyduje, jak wyświetlić ten stan. To ładna architektura
Sposób SCSS:
Lepszy sposób: - użyj
selected
zmiennej:źródło
Na dzień dzisiejszy (Angular 9) Angular używa Shadow DOM do wyświetlania komponentów jako niestandardowych elementów HTML . Jednym ze eleganckich sposobów stylizowania tych niestandardowych elementów może być użycie niestandardowych zmiennych CSS . Oto ogólny przykład:
Jak widać z powyższego kodu, tworzymy element niestandardowy, tak jak zrobiłby to Angular z każdym komponentem, a następnie zastępujemy zmienną odpowiedzialną za kolor tła w katalogu głównym cienia elementu niestandardowego, z zakresu globalnego .
W aplikacji Angular może to być coś takiego:
parent.component.scss
child-element.component.scss
źródło
Szybka odpowiedź brzmi: w ogóle nie powinieneś tego robić. Łamie enkapsulację komponentów i podważa korzyści uzyskiwane z samodzielnych komponentów. Zastanów się nad przekazaniem flagi prop do komponentu potomnego, a następnie może sam zdecydować, jak renderować inaczej lub zastosować inny CSS, jeśli to konieczne.
Angular odrzuca wszelkie sposoby wpływania na styl dziecka przez rodziców.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
źródło
Miałem również ten problem i nie chciałem używać przestarzałego rozwiązania, więc otrzymałem:
równolegle
składnik potomny
u dziecka w html div
i w kodzie
działa zgodnie z oczekiwaniami i nie powinien być przestarzały;)
źródło
W miarę aktualizacji Internetu natknąłem się na rozwiązanie.
Najpierw pewne zastrzeżenia.
Najpierw zaznacz enkapsulację komponentu podrzędnego jako cień, aby renderowała się w rzeczywistym cieniu. Po drugie, dodaj atrybut części do elementu, który chcesz nadać stylowi nadrzędnemu. W arkuszu stylów komponentów rodzica możesz użyć metody :: part (), aby uzyskać dostęp
źródło
Proponuję przykład, aby to wyjaśnić, ponieważ angular.io/guide/component-styles stwierdza:
Włącz
app.component.scss
, w*.scss
razie potrzeby zaimportuj ._colors.scss
ma kilka wspólnych wartości kolorów:Zastosuj regułę do wszystkich komponentów
Wszystkie przyciski mające
btn-red
klasę będą stylizowane.Zastosuj regułę do pojedynczego komponentu
Wszystkie przyciski mające
btn-red
klasę naapp-login
komponencie będą stylizowane.źródło
Rozwiązałem to poza Angularem. Zdefiniowałem wspólny scss, który importuję do moich dzieci.
shared.scss
child.scss
Moje zaproponowane podejście jest sposobem rozwiązania problemu, o który pytał PO. Jak wspomniano przy wielu okazjach, :: ng-deep,: ng-host ulegnie deprecjacji, a wyłączenie enkapsulacji to po prostu zbyt duży wyciek kodu, moim zdaniem.
źródło