google 事件监听器触发后，如何在 angular2 更改后更新视图？答案

【问题标题】：How to update view after change in angular2 after google event listener fired?google 事件监听器触发后，如何在 angular2 更改后更新视图？
【发布时间】：2023-04-10 04:09:01
【问题描述】：

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

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>

如果您更改输入中的位置，左侧的文本应该会更改。只有在检测到其他更改后才会更改，例如单击下面的文本。

我做错了什么，我该如何做对？

【问题讨论】：

我知道这是旧的......但这可以在角度 v5 中完成吗？ ...我正在收听'cluster_click' 事件，但角度材质对话框未正确初始化

标签： google-maps-api-3 angular

【解决方案1】：

@jhadesdev 引导我朝着正确的方向前进，但我需要zone.run() 而不是zone.runOutsideAngular()。以下是完整的 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.0.0-beta.14。只要记住从 'angular2/core' 导入 NgZone

【解决方案2】：

我认为问题在于自动完成的选择框绝对定位在页面正文元素的末尾，因此在 Angular 跟踪的区域之外（位于 @ 所在的 div 内987654322@是）。

要改变这个，要么：

添加一些 CSS 以相对定位选择框（使用 !important），使其留在区域内

使用NgZone手动触发变更检测：

zone.run(() => {
  console.log('place change');
  _this.keyword = "updated text";
  _this.click = "not clicked";
});

【讨论】：

谢谢，这让我得到了正确的答案。我需要实际使用zone.run() 而不是zone.runOutsideAngular。
看起来它不再适用于 alpha-35，知道为什么吗？