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

Question

Я компонент в угловых 2 называется мой-Комп:

<my-comp></my-comp> 

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

В Polymer вы должны использовать селектор «: host». Я попробовал это в Angular 2. Но это не сработает.

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

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

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

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

Спасибо.

Answer 1

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

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

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

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

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

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

Смотрите также Load external css style into Angular 2 Component

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

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

Answer 2

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

См this plunker

Answer 3

Я нашел решение, как стиль только элемент компонента. Я не нашел никаких документов, как это работает, но вы можете поместить значение атрибутов в директиву компоненты, под свойством «хозяина», как это:

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

UPDATE: Как упоминался Гюнтер Zöchbauer, там была ошибка, и теперь вы можете стиль хоста элемент даже в CSS файл, например:

:host{ ... } 

Answer 4

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

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

Answer 5

Попробуйте: хост>/глубоко /:

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

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

Заменить приложение-ребенка-компонент вашего выбора детской

Answer 6

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

:host::ng-deep <child element>

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

Как другие сказали /deep/ осуждается