Как добавить «класс» к элементу хоста?

Я не знаю, как добавить к моему компоненту атрибут <component></component>динамического класса, но внутри шаблона html (component.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установлен на элементе хоста.

Ответ Гюнтера великолепен (вопрос требует атрибута динамического класса), но я подумал, что добавлю только для полноты ...

Если вы ищете быстрый и понятный способ добавить один или несколько статических классов к элементу host вашего компонента (т. Е. Для целей оформления тем), вы можете просто сделать:

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

И если вы используете класс в теге entry, 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с геттером как

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

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

Вот как я это сделал (Angular 7):

В компонент добавьте вход:

@Input() componentClass: string = '';

Затем в HTML-шаблон компонента добавьте что-то вроде:

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

И, наконец, в шаблоне HTML, где вы создаете экземпляр компонента:

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

Отказ от ответственности: я довольно новичок в Angular, так что, возможно, мне просто повезло здесь!