Як додати "клас" до хост-елемента?

Я не знаю, як додати до свого компонента атрибут <component></component>динамічного класу, але всередині шаблону html (компонент.html).

Єдине знайдене нами рішення - змінити елемент за допомогою елемента "ElementRef". Це рішення здається трохи складним зробити щось, що повинно бути дуже простим.

Інша проблема полягає в тому, що CSS має бути визначений за межами області компонентів, порушуючи інкапсуляцію компонентів.

Чи є більш просте рішення? Щось на зразок <root [class]="..."> .... </ root>шаблону.

@Component({
   selector: 'body',
   template: 'app-element',
   // prefer decorators (see below)
   // host:     {'[class.someClass]':'someField'}
})
export class App implements OnInit {
  constructor(private cdRef:ChangeDetectorRef) {}

  someField: boolean = false;
  // alternatively also the host parameter in the @Component()` decorator can be used
  @HostBinding('class.someClass') someField: boolean = false;

  ngOnInit() {
    this.someField = true; // set class `someClass` on `<body>`
    //this.cdRef.detectChanges(); 
  }
}

Приклад Плункер

Таким чином, вам не потрібно додавати CSS поза компонента. CSS, як

:host(.someClass) {
  background-color: red;
}

працює з внутрішньої сторони компонента, і селектор застосовується лише в тому випадку, якщо клас someClassвстановлений на хост-елементі.

Відповідь Гюнтера чудова (питання задає атрибут динамічного класу), але я подумав, що додам лише для повноти ...

Якщо ви шукаєте швидкий і чистий спосіб додати один або кілька статичних класів до хост-елемента вашого компонента (тобто для цілей стилізації), ви можете просто зробити:

@Component({
   selector: 'my-component',
   template: 'app-element',
   host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}

І якщо ви використовуєте клас на тезі введення, Angular об'єднає класи, тобто

<my-component class="someClass2">
  I have both someClass1 & someClass2 applied to me
</my-component>

Ви можете просто додати @HostBinding('class') class = 'someClass';всередину свого класу @Component .

Приклад:

@Component({
   selector: 'body',
   template: 'app-element'       
})
export class App implements OnInit {

  @HostBinding('class') class = 'someClass';

  constructor() {}      

  ngOnInit() {}
}

Якщо ви хочете додати динамічний клас до свого хост-елемента, ви можете комбінувати його HostBindingз getter як

@HostBinding('class') get class() {
    return aComponentVariable
}

Демонстрація Stackblitz на https://stackblitz.com/edit/angular-dynamic-hostbinding

Ось як я це зробив (кутовий 7):

У компоненті додайте вхід:

@Input() componentClass: string = '';

Потім у HTML-шаблон компонента додайте щось на зразок:

<div [ngClass]="componentClass">...</div>

І, нарешті, в шаблоні HTML, куди ви інстантуєте компонент:

<root componentClass="someclass someotherclass">...</root>

Відмова: Я досить новачок у Angular, тому мені, можливо, просто пощастить тут!