Angular 2: Как стиль элемента хоста компонента?

У меня есть компонент в Angular 2, называемый my-comp:

<my-comp></my-comp>

Как стилизовать элемент хоста этого компонента в Angular 2?

В Polymer вы будете использовать селектор ": host". Я попробовал его в Angular 2. Но он не работает.

:host {
  display: block;
  width: 100%;
  height: 100%;
}

Я также попытался использовать компонент в качестве селектора:

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

Оба подхода не работают.

Спасибо.

Ответ 1

Появилась ошибка, но она была исправлена тем временем. :host { } теперь отлично работает.

Также поддерживаются

:host(selector) { ... } для selector для соответствия атрибутам, классам... на элементе хоста
:host-context(selector) { ... } для selector для соответствия элементам, классам,... на родительских компонентах
selector /deep/ selector (псевдоним selector >>> selector не работает с SASS) для стилей, сопоставляемых границам элементов
- ОБНОВЛЕНИЕ: SASS осуждает /deep/.
  Angular (TS и Dart) добавили ::ng-deep в качестве замены, которая также совместима с SASS.

См. также Загрузите внешний CSS-стиль в Angular 2 Компонент

/deep/ и >>> не соответствуют теми же комбинаторами селекторов, что и в Chrome, которые устарели.
Angular эмулирует (переписывает) их и, следовательно, не зависит от браузеров, поддерживающих их.

Вот почему /deep/ и >>> не работают с ViewEncapsulation.Native, который позволяет создавать собственные DOM теневого пространства и зависит от поддержки браузера.

Ответ 2

Я нашел решение, как стилизовать только элемент компонента. Я не нашел никакой документации, как это работает, но вы можете поместить значения атрибутов в директиву компонента под свойством "host" следующим образом:

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

UPDATE: Как упоминал Гюнтер Цохбауэр, произошла ошибка, и теперь вы можете стилизовать элемент хоста даже в файле css, например:

:host{ ... }

Ответ 3

Отметьте эту проблему. Я думаю, что ошибка будет решена, когда будет реализована новая логика прекомпиляции шаблона. На данный момент я думаю, что лучшее, что вы можете сделать, это обернуть ваш шаблон в <div class="root"> и создать стиль div:

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

Смотрите этот плункер

Ответ 4

В вашем Компоненте вы можете добавить .class к вашему элементу хоста, если у вас будут какие-то общие стили, которые вы хотите применить.

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';

Ответ 5

Для тех, кто ищет стиль дочерних элементов :host, приведен пример использования ::ng-deep

:host::ng-deep <child element>

e.g :host::ng-deep span { color: red; }

Как говорили другие, /deep/ устарел

Ответ 6

Попробуйте: host > /deep/:

Добавьте в файл parent.component.less следующее

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

Заменить дочерний компонент app-child на ваш дочерний селектор