Angular 2: Jak stylizować element hosta komponentu?

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.

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.

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{ ... }

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

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';

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

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