Динамически добавлять классы к элементам хоста, используя @HostBinding в Angular?

Вопрос:

Можно ли использовать @HostBinding таким образом, чтобы добавлять, удалять или переключать классы в ведущем элементе, но не удалять уже существующие классы, в частности, когда классы необходимо динамически переключать?

Например, это добавит класс light и не нарушит работу предыдущих классов, однако light не может быть динамическим.

Представьте себе этот визуализированный узел dom:

<div [classToggler] class="someClasses1 someClasses2' ></div>

С этим контроллером:

@HostBinding('class.light') isLight = theme === 'light';  // true
ngOnInit() {
  this.store.select('classToggler').subscribe((className) => {
      this.theme = className || 'light'
  });

}

Где, как в этом примере, контроллер динамически добавит класс освещения, но, насколько мне известно, удалит другие классы в элементе хоста.

@HostBinding('class') theme;

ngOnInit() {
  this.store.select('classToggler').subscribe((className) => {
      this.theme = className || 'light'
  });
}

В конце второй пример повторно отобразит элемент dom, чтобы он выглядел так:

<div [classToggler] class="light'></div>

Поэтому удалите предыдущие классы, что нежелательно. Есть идеи, как получить лучшее из обоих миров?


angular angular2-directives angular2-hostbinding
person Armeen Harwood    schedule 29.11.2017    source источник
comment
Можете ли вы использовать геттер для isLight вместо назначения выражения? Это может сделать его реактивным так же, как и второй шаблон. Я посмотрю, смогу ли я смоделировать пример.   -  person Richard Matsen    schedule 29.11.2017
comment
@RichardMatsen, не могли бы вы оставить ответ, первый ответ не то, что я ищу? Я хочу, чтобы возможность добавить (n) количество классов .light было просто примером.   -  person Armeen Harwood    schedule 29.11.2017
comment
Сделаю. Все еще работаю над Plunker (ненавижу публиковать непроверенные).   -  person Richard Matsen    schedule 29.11.2017

Ответы (2)


arrow_upward
5
arrow_downward

Изменить эту строку

@HostBinding('class') theme;

to 

@HostBinding('class') 
get themeClass(){
  return this.theme;
};
person Sunil Singh    schedule 08.10.2018

arrow_upward
-3
arrow_downward

Что вам нужно, так это [ngClass]:

<div [ngClass]="{'light':condition}" class="someClasses1 someClasses2" ></div>

Когда условие истинно, «легкий» класс будет добавлен к someClasses1 someClasses2 и наоборот.

Вы даже можете составить несколько классов с несколькими ситуациями, например:

<div [ngClass]="{'class1':condition1, 'class2':conditions2}" class="someClasses1 someClasses2" ></div>

вы можете добавить столько условных классов, сколько вам нужно.

person Mehdi    schedule 29.11.2017
comment
Я думаю, что ОП касается директивы, поэтому решение должно быть в директиве, а не в html... - person Random; 14.09.2018
comment
Цель директивы состоит в том, чтобы ее можно было легко использовать повторно. Например, я приземлился здесь, пытаясь применить несколько классов с помощью одной директивы (человек, использующий директиву, не должен знать, какие именно классы должны применяться, чтобы получить ожидаемое поведение). Я также предполагаю, что ОП создавал более сложную директиву, которая, среди прочего, должна применять класс... - person Random; 17.09.2018
comment
HostBinding означает, что OP нужен класс на хосте. - person Sampgun; 25.09.2018