Любой способ добавить имя класса из переменной к элементу хоста в Angular2, не стирая существующие классы?

Question

У меня есть имя класса в переменной, и я хочу добавить его в элемент host моего компонента Angular2, но я не могу найти способ сделать это.

Я могу добавить класс с HostBinding, если это постоянная строка. Но переменные не существуют в компоненте во время инициализации HostBinding. По крайней мере, я получаю «неопределенное» при попытке.

Есть ли способ добавить класс из переменной в элемент host? Или, возможно, установить HostBinding в конструкторе после того, как я могу получить доступ к переменным? В противном случае было бы идеально использовать ngClass, но я не могу применить его к самому элементу хоста.

В качестве дополнительного примечания - я делаю это, потому что я делаю CSS-тематику с host-context (.my-theme). Если есть другой способ применить этот основной класс к компоненту Angular2, я действительно открыт для идей. Название темы происходит от переменной, поэтому оно не является константой.

Answer 1

Вы можете использовать @HostBinding для привязки к классу:

@HostBinding('class') hostClass;

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

if (!hostClass) {
    this.hostClass = classVar;
} else {
    this.hostClass = `${this.hostClass} ${classVar}`;
}