如何在Angular 2中使用指令获取新旧值？

Question

Does anyone know how can I get the old and new value inside the directive? I need to compare if the value was changed to add a css class.

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

method 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
  }
}

method 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;
}

Note that both these methods will also be called when the directive is first initialized. In those cases the previous value will be undefined (which you can test for in ngOnChanges using the isFirstChange() method).