我正在使用带有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课程。 见截图:
答案 0 :(得分:0)
我需要做的是找到DIV元素并删除它的“脏”CSS类
不要在元素上执行此操作。该类由ngModel设置,您应该使用ngModel
的API将其.dirty
状态设置为false。
http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
答案 1 :(得分:0)
是的,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">