Google事件监听器触发后，Angular2中的更改后如何更新视图? [英] How to update view after change in angular2 after google event listener fired?
问题描述
在触发事件侦听器后，我试图更新视图.但是，只有在检测到另一个更改后，该更改才会被检测到，并且不会更新.
I am trying to update the view after an event listener is fired. However, the change is not detected and isn't update until another change is detected.
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="jquery@2.1.4" 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>
如果更改输入中的位置，则左侧的文本应更改.只有在检测到其他更改(例如，单击下面的文本)后，该更改才会更改.
If you change the location in the input, the text to the left should change. It only is changed after another change is detected, for example clicking the text below.
我做错了什么，我该怎么做对呢?
What am I doing wrong and how do I do it right?
推荐答案
@jhadesdev使我朝着正确的方向前进，但我需要的是zone.run()而不是zone.runOutsideAngular().这是有效的完整javascript代码:
@jhadesdev led me in the right direction but instead of zone.runOutsideAngular() I needed zone.run(). Here's the full javascript code that worked:
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);
这篇关于Google事件监听器触发后，Angular2中的更改后如何更新视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
