Question

我试图写一个google place指令，因为所有已完成的指令看起来效果不好或者代码基础非常可怕。

所以这是我的尝试很干净但是当用户输入内容时它不会被激活：

{ areaCoords(1,1,1,1); areaCoords(1,1,2,2) }.

:- areaCoords(X1,Y1,X2,Y2), areaCoords(XA,YA,XB,YB), XA >= X1, X2 >= XA, YB >= Y1, Y2 >= YA, (X1,Y1,X2,Y2) != (XA,YA,XB,YB).

然后我会这样使用：

@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);
    });
  }
}

但是当我输入输入时，自动完成没有触发，我可能会遗漏一些简单但我无法弄清楚它可能是什么。也许我必须以某种方式手动收听输入然后触发搜索？

Answer 1

由于Google地图事件是在角度区域之外触发的，因此您需要在角度区域内运行回调：

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

Angular - 当输入值改变时，Google置位指令不会被触发

1 个答案: