Angular 使用@Input()检测数据变更
之前使用@Input()用于父子组件间通信，参考之前的博客。
可以做到单向绑定的效果，但不能检测传入值的变化，我这里需要根据传入值的变化改变其他值。这里介绍了@Input()的另外一种用法。@Input() 不但可以装饰变量，也能装饰get和set方法。
我这里的是要根据产品的状态来显示不同颜色提示，我们公司产品比较多，大多数都有状态显示，所以封装个通用组件。以下为基本实现。
import { Component, OnInit, Input } from '@angular/core';
const statusTypeMap = {
'Running': 'success',
'Provisioning': 'warning',
'Stopped': 'error',
};
@Component({
selector: 'app-status-show',
template: `
<nz-badge [nzStatus]="statusType" [nzText]="status"></nz-badge>
`,
})
export class StatusShowComponent implements OnInit {
private _statusType: string;
private _status: string;
@Input()
set status(name: string) {
this._status = name;
this.setStatusType();
}
get status (): string {
return this._status;
}
get statusType (): string {
return this._statusType;
}
constructor () {
}
private setStatusType () {
this._statusType = statusTypeMap[this._status] ? statusTypeMap[this._status] : 'default';
}
ngOnInit(): void {
}
}
typescript的get和set在python中也有，在python中是通过property装饰器实现的。