Angular 2 - 从Component事件中添加CSS类

Question

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

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

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

然后输入的值变为空白（如所需），但不删除父div上的“脏”CSS MDL类。所以我想要做的是简单地从Component模板中的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课程。 见截图：

Answer 1

  

我需要做的是找到DIV元素并删除它的“脏”CSS类

不要在元素上执行此操作。该类由ngModel设置，您应该使用ngModel的API将其.dirty状态设置为false。

更多

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

Answer 2

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

为您的例子：

/joe/myFolder

或mdl-tabs：

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

或mdl-checkboxes：

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