Кутовий 2: Як стилізувати хост-елемент компонента?

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

<my-comp></my-comp>

Як один стиль є головним елементом цього компонента в куті 2?

У полімері ви використовуєте селектор ": host". Я спробував це в Angular 2. Але це не працює.

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

Я також спробував використовувати компонент як селектор:

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

Обидва підходи, схоже, не спрацьовують.

Дякую.

Була помилка, але її тим часом виправили. :host { }працює нормально зараз.

Також підтримуються

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

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

• selector /deep/ selector(псевдонім selector >>> selectorне працює з SASS), щоб стилі відповідали межам елементів

  • ОНОВЛЕННЯ: SASS застаріло /deep/.
    Кутова (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, які застаріли.
Кутовий імітує (переписує) їх, тому не залежить від браузерів, які їх підтримують.

Це також пояснює , чому /deep/і >>>не працюють з , ViewEncapsulation.Nativeщо дозволяє рідний тіньову DOM і залежить від підтримки браузера.

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

Перевірте цю проблему . Я думаю, що помилка буде вирішена, коли буде реалізована нова логіка докомпіляції шаблонів . На даний момент я думаю, що найкраще, що ви можете зробити, - це загортати шаблон <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 {}

Дивіться цей планкер

У своєму компоненті ви можете додати .class до свого хост-елемента, якщо у вас є загальні стилі, які ви хочете застосувати.

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

Для тих, хто хоче стилізувати дочірні елементи :hostсюди, є прикладом використання::ng-deep

:host::ng-deep <child element>

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

Як говорили інші, /deep/це застаріло

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

Додайте наступне до файлу parent.component.less

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

Замініть компонент додаток-довідник дитиною, що вибирається