如何此前谷歌事件侦听器发射更新angular2变更后视图 [英] How to update view after change in angular2 after google event listener fired
本文介绍了如何此前谷歌事件侦听器发射更新angular2变更后视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想一个事件监听器被触发后更新视图。然而，未检测到变化，直到检测到另一个变化是不会更新。
\r
\r\r
\r进口{\r
组件，查看，引导\r
}从angular2 / angular2';\r
\r
@零件（{\r
选择：应用程序\r
}）\r
@视图（{\r
模板：{{关键词}}＆LT;输入ID =关键词/＆GT;＆LT; BR /＆GT;＆LT;跨度（点击）=更新（）＆GT; {{点击}}＆LT; / SPAN＆GT;'\r
}）\r
类应用{\r
关键词;\r
自动完成;\r
点击;\r
\r
构造函数（）{\r
VAR _this =这一点;\r
VAR输入=（的document.getElementById（'关键字'））;\r
this.autocomplete =新google.maps.places.Autocomplete（输入）;\r
google.maps.event.addListener（this.autocomplete，'place_changed'，函数（）{\r
的console.log（'的地方变）;\r
_this.keyword =更新文字;\r
_this.click =点击不;\r
}）;\r
this.keyword =原文\r
this.click =点击我作出选择，强制变更后;\r
}\r
\r
更新（）{\r
的console.log（点击）;\r
this.click =点击;\r
}\r
\r
}\r
\r
引导程序（App）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;\r
＆所述;脚本数据需要=jquery@2.1.4数据semver =2.1.4SRC =HTTP：//$c$c.jquery.com/jquery-2.1.4.min.js＆GT ;＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =https://jspm.io/system.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-alpha.30/angular2.dev.js＆GT;＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =https://maps.googleapis.com/maps/api/js??v=3.exp&libraries=places＆GT;＆下; /脚本＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
＆LT;应用＆GT;＆LT; /应用＆GT;\r
\r
＆LT;脚本＆GT;\r
System.import（'主'）;\r
＆LT; / SCRIPT＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
如果您在输入更改位置，文字向左应改变。它仅检测到另一个变化后改变，例如点击下面的文字。
我是什么做错了，我该怎么做是正确的？
解决方案
@jhadesdev导致我在正确的方向，但不是 zone.runOutsideAngular（）我需要 zone.run（）。下面是完整的javascript code的工作：
\r
\r\r
\r进口{\r
组件，视图，引导，NgZone\r
}从angular2 / angular2';\r
\r
@零件（{\r
选择：应用程序\r
}）\r
@视图（{\r
模板：{{关键词}}＆LT;输入ID =关键词/＆GT;＆LT; BR /＆GT;＆LT;跨度（点击）=更新（）＆GT; {{点击}}＆LT; / SPAN＆GT;'\r
}）\r
类应用{\r
关键词;\r
自动完成;\r
点击;\r
区：NgZone;\r
\r
构造函数（区：NgZone）{\r
this.zone =区;\r
VAR输入=（的document.getElementById（'关键字'））;\r
this.autocomplete =新google.maps.places.Autocomplete（输入）;\r
google.maps.event.addListener（this.autocomplete，'place_changed'，（）=＆GT; {\r
this.zone.run（（）=＆GT; {\r
的console.log（'的地方变）;\r
this.keyword =更新文字;\r
this.click =点击不;\r
}）;\r
}）;\r
this.keyword =原文\r
this.click =点击我作出选择，强制变更后;\r
}\r
\r
更新（）{\r
的console.log（点击）;\r
this.click =点击;\r
}\r
\r
}\r
\r
引导程序（App）; \r
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 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);
这篇关于如何此前谷歌事件侦听器发射更新angular2变更后视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
