如何在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? 我做错了什么，我该怎么做？
2 个解决方案
解决方案1
34 已采纳 2015-07-11 17:29:40
@jhadesdev led me in the right direction but instead of zone.runOutsideAngular() I needed zone.run() . @jhadesdev带领我朝着正确的方向前进，但不是zone.runOutsideAngular()我需要zone.run() 。 Here's the full javascript code that worked: 这是完整的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);
解决方案2
8 2015-07-11 08:12:48
I think the problem is that the selection box of the autocomplete is being absolutely positioned at the end of the body element of the page, and so outside the zone that is being tracked by Angular (which is inside the div where the app is). 我认为问题在于自动完成的选择框绝对位于页面的body元素的末尾，因此在Angular跟踪的区域之外（在app所在的div app ）。
To change this, either: 要改变这一点，要么：
add some CSS to position the selection box relative (using
!important) to make it stay inside the zone添加一些CSS以相对定位选择框（使用!important）使其保持在区域内trigger the change detection manually, using NgZone :
使用NgZone手动触发更改检测： zone.run(() => { console.log('place change'); _this.keyword = "updated text"; _this.click = "not clicked"; });
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.