本文介绍了google 事件侦听器触发后,如何在 angular2 更改后更新视图?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在触发事件侦听器后更新视图.但是,不会检测到更改,并且在检测到另一个更改之前不会更新.

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 更改后更新视图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-24 19:18
查看更多