在angular2中,如何获取为@Input发送的对象上更改的属性的onChanges
我有一个指令,上面有一个接受类的在angular2中,如何获取为@Input发送的对象上更改的属性的onChanges,angular,Angular,我有一个指令,上面有一个接受类的@Input @指令({selector:'my Directive'}) @视图({指令:[核心指令]}) 导出类MyDirective{ @Input()inputSettings:SettingsClass; @输入()计数:数字; onChanges(地图){ log('onChanges'); } } 该指令用于html: 。。。 ... 如果更改了settings.count,则会触发onChanges。如果设置类上的任何其他属性发生更改,则不会激
@Input
@指令({selector:'my Directive'})
@视图({指令:[核心指令]})
导出类MyDirective{
@Input()inputSettings:SettingsClass;
@输入()计数:数字;
onChanges(地图){
log('onChanges');
}
}
该指令用于html:
。。。
...
如果更改了settings.count,则会触发onChanges
。如果设置类上的任何其他属性发生更改,则不会激发
如何检测设置上的任何属性是否有更改?Angular只会注意到对象是否已更改为其他对象(即,对象引用已更改),因此无法使用
ngOnChanges()
解决问题。有关更多信息,请参阅
您可以在MyDirective类中实现该方法。该生命周期挂钩被称为“每次检查组件或指令的输入属性时。使用它通过执行自定义检查来扩展更改检测。”
要实现自定义检查方法,首先需要在类设置类上实现.equals()
方法,这样就可以在ngDoCheck()中编写如下代码:
另一种解决方案是使用ViewChild并直接调用方法来更新对象,这在您无法控制要传递给组件的对象时非常有用:
在子组件中添加如下函数:
public updateSettings(obj: SettingsClass) {
this.inputSettings = obj;
}
在父组件中调用updateSettings函数:
@Component({
selector: 'app-mycomponnent',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class PlayComponent implements OnInit {
@ViewChild(MyDirectiveComponent,{static: false}) mydirective;
elsewhereinthecode() {
// When you need to update call :
mydirective.updateSettings(settingsObject);
}
}
我猜这(目前?)不起作用。。。可能是因为inputSettings
包含对对象实例的引用,并且引用本身没有更改,Angular可能不会尝试比较对象属性,因此不会看到或报告更改。(我希望我错了,或者我希望他们能解决这个问题。)事实上,我确认了我的假设:“如果address对象是可变的,那么其他组件可以更新street属性而不创建新的address对象。如果发生这种情况,onChanges钩子将不会被调用”。您也可以对属性输入属性使用getter和setter。您能解释一下您的代码示例吗?为什么会调用onChanges()
?
@Component({
selector: 'app-mycomponnent',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class PlayComponent implements OnInit {
@ViewChild(MyDirectiveComponent,{static: false}) mydirective;
elsewhereinthecode() {
// When you need to update call :
mydirective.updateSettings(settingsObject);
}
}