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

189

У меня есть компонент в 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%;
}

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

Спасибо.

Рави Теджа Гудапати
источник
2
Вы уверены, что стиль не применяется? Я сделал основной проект и сделал именно это, и это сработало. Я установил my-selector { color : red}в моем CSS и он отлично работает.
Пакане
1
Начиная с бета-версии, у меня работает селектор: host.
Джон Свонсон,

Ответы:

285

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

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

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

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

    • ОБНОВЛЕНИЕ: SASS устарела /deep/.
      Angular (TS и Dart) добавлен ::ng-deepв качестве замены, который также совместим с SASS.

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

См. Также Загрузка внешнего стиля CSS в Angular 2 Component.

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

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

Гюнтер Цохбауэр
источник
@Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}
Гюнтер Цохбауэр
@ OndraŽižka Вы можете уточнить подробнее? Это чистый CSS, как он может быть несовместим с CSS и самим собой?
Гюнтер Цохбауэр
Если я не пропустил некоторые важные изменения в CSS, / deep / и >>> не являются CSS.
Ондра Жижка
Они устарели, но это не имеет значения. Они эмулируются Angular (переписаны), поэтому они работают только с ViewEncapsularion.Emulated(по умолчанию), но не с Native.
Гюнтер Цохбауэр
В Angular 2.4.7 я могу :host { p { font-size: 80%; } }работать в файле ... component.css. Как только я пытаюсь использовать его, styles: [:host { p { font-size: 80%; } }]он больше не работает. Очень странно.
Мартин
39

Я нашел решение, как стилизовать только элемент компонента. Я не нашел никакой документации о том, как это работает, но вы можете поместить значения атрибутов в директиву компонента под свойством '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{ ... }
prespic
источник
1
Мне нравится это лучше, чем создание фиктивного элемента .root, но мне не нравится, что он устанавливает эти стили как встроенные (заставляя !importantпереопределять). Должен быть лучший waayy: \
Scrimothy
4
нет, укладка с помощью host{}в stylesUrlфайле не работает. необходимо :host.
phil294
Как мы можем получить доступ к переменной компонента внутри хоста? Если я хочу определить цвет фона динамически? ': host {background-color: this.bgColor; } '
Пратап А.К.
@ PratapA.K Привет, вы можете использовать HostBinding derorator. Ваш пример будет: @HostBinding('style.background-color') private color = 'lime'; Google найдет вам много примеров и статей.
предварительно
11

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

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

alexpods
источник
9

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

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';
Xquick
источник
6

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

:host::ng-deep <child element>

например :host::ng-deep span { color: red; }

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

Петрос Кириаку
источник
4

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

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

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

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

abahet
источник
Что делать, если вам нужна таблица стилей типа начальной загрузки вместо одного стиля?
Адитья Викас Деварапалли