更改检测在角色2中的指令事件输出中不起作用 [英] Change Detect not working in directive event ouput in Angular 2
本文介绍了更改检测在角色2中的指令事件输出中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用这个指令。但是,在setAddress事件输出中,在我的组件中未检测到任何更改。该视图未更新。我想了解。
I use this directive. However, on the setAddress event output, no changes are detected in my component. The view is not updated. I d'ont understand.
对于测试,如果我删除了一个简单的setTimeout来替换google.maps.event.addListener来调用invokeEvent。它是有效的。
For test, if i remove the google.maps.event.addListener to replace by a simple setTimeout to call invokeEvent. It works.
@Directive({
selector: '[googleplace]',
providers: [NgModel],
host: {
'(input)' : 'onInputChange()'
}
})
export class GoogleplaceDirective {
@Output() setAddress: EventEmitter<any> = new EventEmitter();
modelValue:any;
autocomplete:any;
private _el:HTMLElement;
constructor(el: ElementRef,private model:NgModel) {
this._el = el.nativeElement;
this.modelValue = this.model;
var input = this._el;
this.autocomplete = new google.maps.places.Autocomplete(input, {});
google.maps.event.addListener(this.autocomplete, 'place_changed', ()=> {
var place = this.autocomplete.getPlace();
this.invokeEvent(place);
});
}
invokeEvent(place:Object) {
this.setAddress.emit(place);
}
onInputChange() {
}
}
在我的组件视图中
<input type="text" class="validation-address-input" style="margin-top: 100px;" [value]="form.customerAddress"
(setAddress)="setCustomStartLocation($event)" googleplace>
在我的组件中
/**
*
* @param place
*/
setCustomStartLocation(place: Object) {
this.currentStep = 2;
}
推荐答案
处理程序 place_changed
正在角度区域外运行。你需要这样运行:
Handler for place_changed
is running outside angular zone. You need to run it like this:
constructor(..., private zone: NgZone) {
...
google.maps.event.addListener(this.autocomplete, 'place_changed', ()=> {
var place = this.autocomplete.getPlace();
this.zone.run(() => this.invokeEvent(place)); // run inside angular zone
});
这篇关于更改检测在角色2中的指令事件输出中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文