Wie kann ich den alten und neuen Wert mithilfe der Direktive in Angular 2 erhalten?

Question

Weiß jemand, wie ich den alten und neuen Wert innerhalb der Richtlinie bekommen kann? Ich muss vergleichen, ob der Wert geändert wurde, um eine CSS-Klasse hinzuzufügen.

HTML:

<ul> 
    <li *ngFor="let item of list" [addClass]="item.name">{{item.name}}</li> 
</ul> 

Add-class.directive.ts

import { Directive, Input, OnInit } from '@angular/core'; 

@Directive({ 
    selector: '[addClass]' 
}) 

export class AddClassDirective implements OnInit { 
    @Input('addClass') addClass: string; 

    constructor() { 
    } 

    ngOnInit() { 
    console.log(this.addClass); 
    } 

} 

Answer 1

Methode 1:

ngOnChanges(changes: SimpleChanges) { 
    if (changes['addClass'] && !changes['addClass'].isFirstChange()) { 
    const prev: string = changes['addClass'].previousValue; 
    const cur: string = changes['addClass'].currentValue; 

    // do something with prev and cur 
    } 
} 

Methode 2:

private _addClass: string; 

@Input() set addClass(value: string) { 
    const prev = this._addClass; 
    this._addClass = value; 
    const cur = value; 

    if (typeof prev !== 'undefined') { 
    // do something with prev and cur 
    } 
} 

get addClass() { 
    return this._addClass; 
} 

Beachten Sie, dass diese beiden Methoden auch aufgerufen werden, wenn die Richtlinie zuerst initialisiert wird. In diesen Fällen ist der vorherige Wert undefined (für den Sie in ngOnChanges mit der Methode isFirstChange() testen können).