Angular 2 - 从组件事件添加 CSS 类答案

【问题标题】：Angular 2 - Add CSS class from Component eventAngular 2 - 从组件事件添加 CSS 类
【发布时间】：2016-06-05 23:54:28
【问题描述】：

我将 Angular 2 与 TypeScript 和 MDL 一起使用，并具有以下简单组件。基本上它是一个带有按钮的输入，然后是它下面的一系列跨度。所以你输入一些“标签”，然后点击按钮，集合就更新了。

一个问题是当我像这样将项目添加到集合中时：

this.chips.push(this.chip);
this.chip = '';

然后输入的值变为空白（根据需要），但父 div 上的“is-dirty”CSS MDL 类不会被删除。所以我想要做的是简单地从组件模板中的 DIV 元素中删除该类。

如何在 Angular2 中查询 DOM 并对其进行操作（添加/删除 CSS 类）？我正在尝试使用 Renderer，但到目前为止没有运气。

注意：我无法绑定这个“is-dirty”类，因为当在输入中输入文本时，MDL javascript 会手动更新它。

代码：

import {Component, View, Directive, Input, ElementRef, Renderer} from 'angular2/core'
import {NgIf, NgFor} from 'angular2/common'

@Component({
   selector: 'chipCollection'
})
@View({
   directives: [NgIf, NgFor],
   template: `
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="chip" [(ngModel)]="chip" (keyup.enter)="addChip()">
  <label class="mdl-textfield__label" for="chip">{{ label }}</label>
  <label class="mdl-button mdl-js-button mdl-button--icon aa-mdl-input-button">
    <i class="material-icons" (click)="addChip()">add</i>
  </label>
</div>
<div *ngIf="chips.length > 0">
  <span *ngFor="#chip of chips" class="aa-chip">{{ chip }}</span>
</div>
`
})
export class ChipCollection {
   @Input() chips: Array<string> = ["chip1", "chip2"];
   @Input() label: string;
   chip: string;

   private renderer: Renderer;
   private element: ElementRef;

   constructor(renderer: Renderer, element: ElementRef){
      this.renderer = renderer;
      this.element = element;
   }

   addChip() {
      if(this.chip) {
         this.chips.push(this.chip);
         this.chip = '';
         debugger; //testing here... 
         // what I need to do here is to find the DIV element and remove its "is-dirty" CSS class, any ideas?
         this.renderer.setElementClass(this.element.nativeElement, 'is-dirty', false);
      }
   }

}

编辑：这是两个“脏”类。我猜 ng-dirty 是由 ngModel 添加的。但是我还需要删除父母的“脏”。我认为这是 MDL 课程。见截图：

【问题讨论】：

标签： javascript dom typescript angular material-design-lite

【解决方案1】：

在这里我需要做的是找到 DIV 元素并删除它的“is-dirty”CSS 类

不要在元素上这样做。该类由 ngModel 设置，您应该使用 ngModel 的 API 将其 .dirty 状态设置为 false。

http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

【讨论】：

【解决方案2】：

是的，is-dirty 是由 mdl 设置的，而不是由 ngModel 设置的（正如其他答案所建议的那样）。我不知道为什么几个月前我尝试解决相反的问题时没有出现这种情况：Register model changes to MDL input elements，但绑定到类列表https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngClass 可能是更好的方法：

你的例子：

<div class="mdl-textfield mdl-js-textfield mdl-text-field--floating-label"
    [class.is-dirty]="false">

或者对于 mdl-tabs：

<div class="mdl-tabs__panel"
    [class.is-active]="someIsActiveBoolean">

或者对于 mdl 复选框：

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect"
      [class.is-checked]="val == 1">

【讨论】：

更多