我正在构建一个属性指令,该指令将宿主元素的背景颜色更改为“质量” @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() {
}
}