Как добавить или удалить имя класса из элемента с другими классами, имея более 1 экземпляра одного и того же элемента

У меня возникли проблемы с добавлением или удалением имени класса CSS из элемента. Кажется, что он не добавляет класс, он может перезаписывать любые другие классы.

<div class="my-div class-a"></div>

Я хотел бы в коде добавить class-b к этому div.

thisDivElement.className = 'class-b';

это удалит my-div class-a и вместо этого вставит class-b.

<div class="class-b"></div>

Итак, как в angular2 вы добавляете/удаляете классы, не перегружая другие классы. Пожалуйста, посоветуйте, как правильно это сделать.


angular angular2-template angular2-components
person AngularOne    schedule 29.05.2017    source источник
comment
Важный! имейте в виду, что элемент имеет более 1 экземпляра. Я хочу добавить/удалить класс из определенного элемента   -  person AngularOne    schedule 30.05.2017

Ответы (1)


arrow_upward
0
arrow_downward

Взято из угловых документов:

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

Вы можете изменить, какие классы активны, заменив значения true/false переменными, которые вы установили в коде.

например HTML:

<some-element [ngClass]="{'first': firstClassActive, 'second': secondClassActive, 'third': thirdClassActive}">...</some-element>

Машинопись:

export class AppComponent {
  firstClassActive: boolean = true;
  secondClassActive: boolean = false;
  thirdClassActive: boolean = false;
}

Более подробные примеры здесь: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

Я также должен указать, что вы можете сделать это с помощью jQuery, который даст вам более прямой доступ к элементам DOM, но вам, на мой взгляд, лучше придерживаться привязки шаблона Angular.

person Steve Land    schedule 29.05.2017
comment
Извините, что не упомянул что-то важное. Если мой div имеет более одного экземпляра в моем шаблоне, и я хочу изменить только один - person AngularOne; 30.05.2017
comment
В зависимости от того, сколько div вы говорите, если их не слишком много, я бы посоветовал вам создать переменные для каждого div, чтобы вы могли управлять ими отдельно. Если у вас есть много разделов для управления, вы, вероятно, захотите создать подкомпонент для каждого из них с входным параметром, чтобы вы могли устанавливать их значения из родительского компонента. - person Steve Land; 30.05.2017