google maps api 3 - places - ¿Cómo actualizar la vista después del cambio en angular2 después de que se haya activado el detector de eventos de Google?
ngx-google-places-autocomplete (2)
Estoy intentando actualizar la vista después de que se activa un detector de eventos. Sin embargo, el cambio no se detecta y no se actualiza hasta que se detecta otro cambio.
import {
Component, View, bootstrap
} from ''angular2/angular2'';
@Component({
selector: ''app''
})
@View({
template: ''{{keyword}} <input id="keyword" /><br/><span (click)="update()">{{click}}</span>''
})
class App {
keyword;
autocomplete;
click;
constructor() {
var _this = this;
var input = (document.getElementById(''keyword''));
this.autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(this.autocomplete, ''place_changed'', function(){
console.log(''place change'');
_this.keyword = "updated text";
_this.click = "not clicked";
});
this.keyword = "original text";
this.click = "click me after selection is made to force change";
}
update() {
console.log("click");
this.click = "clicked";
}
}
bootstrap(App);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://jspm.io/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.30/angular2.dev.js"></script>
<script src="https://maps.googleapis.com/maps/api/js??v=3.exp&libraries=places"></script>
</head>
<body>
<app></app>
<script>
System.import(''main'');
</script>
</body>
</html>
Si cambia la ubicación en la entrada, el texto a la izquierda debería cambiar. Solo se cambia después de que se detecte otro cambio, por ejemplo, al hacer clic en el texto a continuación.
¿Qué estoy haciendo mal y cómo lo hago bien?
@jhadesdev me guió en la dirección correcta, pero en lugar de zone.runOutsideAngular() necesitaba zone.run() . Aquí está el código javascript completo que funcionó:
import {
Component, View, bootstrap, NgZone
} from ''angular2/angular2'';
@Component({
selector: ''app''
})
@View({
template: ''{{keyword}} <input id="keyword" /><br/><span (click)="update()">{{click}}</span>''
})
class App {
keyword;
autocomplete;
click;
zone: NgZone;
constructor(zone:NgZone) {
this.zone = zone;
var input = (document.getElementById(''keyword''));
this.autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(this.autocomplete, ''place_changed'', ()=>{
this.zone.run(() => {
console.log(''place change'');
this.keyword = "updated text";
this.click = "not clicked";
});
});
this.keyword = "original text";
this.click = "click me after selection is made to force change";
}
update() {
console.log("click");
this.click = "clicked";
}
}
bootstrap(App);
Creo que el problema es que el cuadro de selección del autocompletado se coloca absolutamente al final del elemento del cuerpo de la página y, por lo tanto, fuera de la zona que está siendo rastreada por Angular (que está dentro del div donde está la app ).
Para cambiar esto, ya sea:
agregue algo de CSS para posicionar el cuadro de selección relativo (usando
!important) para que permanezca dentro de la zonadispara la detección de cambio manualmente, usando NgZone :
zone.run(() => { console.log(''place change''); _this.keyword = "updated text"; _this.click = "not clicked"; });