Угловой 2: как стиль хост-элемент компонента?

у меня есть компонент в угловой 2 называется my-comp:

<my-comp></my-comp>

как один стиль хост-элемент этого компонента в угловой 2?

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

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

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

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

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

спасибо.

6 138
angularjs css dart angular-dart

6 ответов:

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

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

  • :host(selector) { ... } на selector для сопоставления атрибутов, классов ... на хост-элементе

  • :host-context(selector) { ... } на selector для сопоставления элементов, классов, ...на родительских компонентах

  • selector /deep/ selector (псевдоним selector >>> selector не работает с SASS) для стилей, чтобы соответствовать по элементу границы

    • обновление: Сасс является уничижительным /deep/.
      Угловой (TS и Dart) добавил ::ng-deep в качестве замены, которая также совместима с SASS.

    • UPDATE2:::slotted ::slotted теперь поддерживается всеми новыми браузерами и может быть использован с `ViewEncapsulation.ShadowDom
      https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

см. также загрузите внешний стиль css в угловой компонент 2

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

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

227

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

@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;
}

обновление: Гюнтер, как он отметил, была ошибка, и теперь вы можете стиль главный элемент даже в CSS-файл, как это:

:host{ ... }
26

проверить этот вопрос. Я думаю, что ошибка будет решена, когда новый шаблон логики предварительной компиляции будет реализован. Сейчас я думаю, что лучшее, что вы можете сделать, это обернуть шаблон в <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 {}

посмотреть этот plunker

10

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

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

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

:host::ng-deep <child element>

Эл.г :host::ng-deep span { color: red; }

как /deep/ осуждается

4

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

добавьте к родительскому элементу следующее.деталь.меньше файла

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

замены приложения-ребенка-компонент вашего ребенка селектора

3