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中测试它。）

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

1 个答案: