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

Question

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

所以这是我的尝试，它是干净的，但是当用户键入内容时它没有激活：

@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

由于谷歌地图事件在角度区域外触发，您需要在角度区域内运行回调：

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