Com*_*olf 18 google-maps-api-3 angular
我试图在触发事件监听器后更新视图.但是,未检测到更改,并且在检测到其他更改之前不会更新.
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>如果更改输入中的位置,则左侧的文本应更改.它仅在检测到另一个更改后更改,例如单击下面的文本.
我做错了什么,我该怎么做？
Com*_*olf 34
@jhadesdev带领我朝着正确的方向前进,而不是zone.runOutsideAngular()我需要的zone.run().这是完整的javascript代码:
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);我认为问题在于自动完成的选择框绝对位于页面的body元素的末尾,因此在Angular跟踪的区域之外(在div的app内部).
要改变这一点,要么:
添加一些CSS以相对选择(使用!important)选择框以使其保持在区域内
使用NgZone手动触发更改检测:
zone.run(() => {
console.log('place change');
_this.keyword = "updated text";
_this.click = "not clicked";
});
| 归档时间： |
|
| 查看次数： |
16953 次 |
| 最近记录： |