Angular 2: Jak stylizować element hosta komponentu?

189

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.

Ravi Teja Gudapati
źródło
2
Czy jesteś pewien, że styl nie jest zastosowany? Zrobiłem podstawowy projekt, dokładnie to zrobiłem i zadziałało. Ustawiłem my-selector { color : red}w moim css i działa dobrze.
Pacane
1
W wersji beta 7 selektor: host działa dla mnie.
Jon Swanson

Odpowiedzi:

285

Wystąpił błąd, ale w międzyczasie został naprawiony. :host { }teraz działa dobrze.

Obsługiwane są również

  • :host(selector) { ... }dla selectordopasować atrybuty, zajęcia ... na elemencie przyjmującym
  • :host-context(selector) { ... }dla selectorpasujące elementy, klas ... W komponentów rodzicielskich

  • selector /deep/ selector(alias selector >>> selectornie działa z SASS), aby style pasowały do ​​granic elementów

    • AKTUALIZACJA: SASS jest przestarzałe /deep/.
      Angular (TS i Dart) dodane ::ng-deepjako 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.ShadowDom
      https://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.Nativektóry włącza macierzysty cień DOM i zależy od obsługi przeglądarki.

Günter Zöchbauer
źródło
@Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}
Günter Zöchbauer
@ OndraŽižka czy możesz opracować więcej? To jest czysty CSS, jak może być niezgodny z CSS i samym sobą?
Günter Zöchbauer
O ile nie przeoczyłem ważnej zmiany w CSS, / deep / i >>> nie są CSS.
Ondra Žižka
Są przestarzałe, ale to nie ma znaczenia. Są emulowane przez Angular (przepisane), dlatego działają tylko z ViewEncapsularion.Emulated(domyślnie), ale nie z Native.
Günter Zöchbauer
W Angular 2.4.7 mogę zabrać się :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.
Martin
39

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:

@Component({
    ...
    styles: [`
      :host {
        'style': 'display: table; height: 100%',
        'class': 'myClass'
      }`
})
export class MyComponent
{
    constructor() {}

    // Also you can use @HostBinding decorator
    @HostBinding('style.background-color') public color: string = 'lime';
    @HostBinding('class.highlighted') public highlighted: boolean = true;
}

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:

:host{ ... }
prespic
źródło
1
Lubię to bardziej niż tworzenie fikcyjnego elementu .root, ale nie podoba mi się, że ustawia te style jako wbudowane (zmuszając !importantdo zastąpienia). Musi być lepszy waayy: \
Scrimothy,
4
nie, stylizacja host{}w stylesUrlpliku nie działa. potrzebuje :host.
phil294
jak możemy uzyskać dostęp do zmiennej komponentowej w hoście? Czy chcę dynamicznie decydować o kolorze tła? ': host {background-color: this.bgColor; } '
Pratap AK
@ PratapA.K Cześć, możesz użyć deroratora HostBinding. Twoim przykładem będzie: @HostBinding('style.background-color') private color = 'lime'; Google znajdzie dla ciebie wiele przykładów i artykułów.
prespic
11

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 styl div:

@Component({ ... })
@View({
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
    </div>
  `,
  styles: [`
    .root {
      background: blue;
    }
  `],
   ...
})
class SomeComponent {}

Zobacz ten plunker

alexpods
źródło
9

W swoim komponencie możesz dodać .class do elementu hosta, jeśli masz jakieś ogólne style, które chcesz zastosować.

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';
Xquick
źródło
6

Dla każdego, kto chce stylizować elementy podrzędne :hosttutaj, 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

Petros Kyriakou
źródło
4

Wypróbuj: host> / deep /:

Dodaj następujące elementy do pliku parent.component.less

:host {
    /deep/ app-child-component {
       //your child style
    }
}

Zastąp element podrzędny aplikacji przez selektor podrzędny

abahet
źródło
Co jeśli chcesz mieć arkusz stylów jak bootstrap zamiast jednego stylu?
Aditya Vikas Devarapalli