如何在Angular 2中使用指令獲取新舊值？

Question

有誰知道如何在指令中獲取舊值和新值？ 我需要比較是否更改了值以添加css類。

HTML：

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

附加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

方法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
  }
}

方法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;
}

請注意，在首次初始化指令時，這兩種方法也會被調用。 在這些情況下，先前的值將是undefined （您可以使用isFirstChange()方法在ngOnChanges中進行測試）。