Angular - 输入值更改时不会触发 Google 位置指令

Question

我正在尝试编写一个谷歌地点指令，因为所有完成的指令似乎都不能很好地工作，或者有一个可怕的代码库。

所以这是我的尝试，它是干净的，但当用户键入内容时它不会激活:

@Directive({
  selector: '[googlePlace]'
})

export class GoogleplaceDirective implements OnInit {
  @Output() placeChange: EventEmitter<any> = new EventEmitter<any>();

  public autocomplete: any;

  constructor(private elementRef: ElementRef) {}

  ngOnInit() {

    this.autocomplete = new google.maps.places.Autocomplete(this.elementRef.nativeElement, {});

    google.maps.event.addListener(this.autocomplete, 'place_changed', () => {

      const place = this.autocomplete.getPlace();

      this.placeChange.emit(place);
    });
  }
}

然后我像这样使用:

<input formControlName="address" googlePlace (placeChange)="setAddress($event)">

但是当我输入输入时，自动完成功能没有触发，我可能错过了一些简单的东西，但我不知道那可能是什么。也许我必须以某种方式手动监听输入，然后触发搜索？

Answer 1

当谷歌地图事件在 Angular 区域外触发时，您需要在 Angular 区域内运行回调:

constructor(private zone: NgZone) {}

google.maps.event.addListener(this.autocomplete, 'place_changed', () => {
  const place = this.autocomplete.getPlace();
  this.zone.run(() => this.placeChange.emit(place)); // run inside angular zone
});

另请参阅

• google maps places autocomplete addEventListener doesn't work