Angular 6,指令ngOnChanges是否不适用于lambda表达式?

时间:2018-12-10 22:07:00

标签: angular typescript

我正在构建一个属性指令,该指令将宿主元素的背景颜色更改为“质量” @input。

我发现,如果我将ngOnChanges实现为lambda表达式,则在输入发生更改时不会调用ngOnchanges方法。

我的游乐场:

https://stackblitz.com/edit/angular-6-playground-lqwps2?file=src%2Fapp%2FmyOrder.directive.ts

@Directive({
  selector: '[my-order]'
})

export class MyOrderDirective {

  @Input()
  quality: number = 1;

  @HostBinding('style.background-color')
  backgroundColor: string;


  // ************* works ********************
  // ngOnChanges(changes: SimpleChanges) {
  //   if (this.quality % 2 == 0) {
  //     this.backgroundColor = 'red';
  //
  //   } else {
  //     this.backgroundColor = 'blue';
  //   }
  //
  // };


  // ******* lambda expression does NOT work ***********
  ngOnChanges = (changes: SimpleChanges) => {
    if (this.quality % 2 == 0) {
      this.backgroundColor = 'red';

    } else {
      this.backgroundColor = 'blue';
    }

  };

  // ******************** Not work *********************
  // ngOnChanges = function (changes: SimpleChanges) {
  //   if (this.quality % 2 == 0) {
  //     this.backgroundColor = 'red';
  //
  //   } else {
  //     this.backgroundColor = 'blue';
  //   }
  //
  // };


  constructor() {

  }


}

1 个答案:

答案 0 :(得分:5)

此行为有问题on github

  

#7270(注释)所述,这是设计使然。这样做会使运行时变慢,并且可以防止树抖动。因此我们将不执行此操作。

由棱角团队成员mhevery声明