我在我的应用中使用谷歌自动完成API . 因为我想将它用作表单控件,所以我还实现了ControlValueAccessor来创建自定义控件 .
我只是粘贴谷歌文档中的代码,我注意到这些代码:
this.ngZone.run(() => {
const place: any = autocomplete.getPlace();
这是完美的工作,但当你甚至悬停在输入控件上时会导致很多变化检测 .
我更改了 ngZone.runOutsideAngular
并在输入的每次更改后添加了 applicationRef.tick()
. 问题是,在育儿表格上,我可以选择一个地址,但只有当我松开焦点并专注于表格的另一个控制时,我才能看到变化 . 难道我做错了什么?
这是我的ngOnInit:
ngOnInit() {
this.mapsAPILoader.load().then(() => {
const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {});
autocomplete.addListener('place_changed', () => {
this.location = Object.assign(this.location,
{ formattedAddress: this.searchElementRef.nativeElement.value });
this.ngZone.runOutsideAngular(() => {
const place: any = autocomplete.getPlace();
this.locationChanged(this.location); // This is the registerOnChange of the ControlValueAccessor
this.applicationRef.tick(); // These should have operate a change detection and is not
});
});
});
}
有没有人知道如何实现谷歌自动完成作为表单控件而不在角度区域内运行?