传统 DOM 操作 Angular 2/Google Maps API答案

【问题标题】：Traditional DOM Manipulation Angular 2/Google Maps API传统 DOM 操作 Angular 2/Google Maps API
【发布时间】：2016-06-29 22:38:33
【问题描述】：

我正在尝试将谷歌地图位置自动完成搜索输入添加到 Angular 2 应用程序，我正在尝试弄清楚如何继续它。到目前为止，我有一个组件，并且 OnInit 我正在尝试运行必要的谷歌代码。 Google 的代码是简单的 Javascript，例如： var input = document.getElementById('pace-input') var autocomplete = new google.maps.places.Autocomplete(input, options) 我假设我必须使用 ElementRef 来获取 DOM 元素并运行此代码，但我不知道该怎么做。谁能帮助我使用 Angular 2 进行传统的 DOM 操作，或者提出更好的方法？

【问题讨论】：

标签： google-maps angular

【解决方案1】：

想通了。已使用@ViewChild('pacinput') ref: ElementRef;

在ViewOnInit之后抓取元素：

let autocomplete = new google.maps.places.Autocomplete((this.ref.nativeElement),{types: ['geocode']});

【讨论】：

嗨，我正在尝试在 Angular 2 中做同样的事情。但是，我遇到了另一个错误。我得到 angular2-polyfills.js:142 Uncaught TypeError: Cannot read property 'zone' of null 当我引用

【解决方案2】：

这不是您问题的解决方案。但它可能会帮助您朝着正确的方向前进。

要使用 Angular2 操作 DOM，您可以使用 BrowserDomAdapter api。

Right way to use BrowserDomAdapter - Plunker

import {BrowserDomAdapter} from 'angular2/platform/browser';
export class AppComponent {
 dom:BrowserDomAdapter;
  constructor() { 
    this.dom = new BrowserDomAdapter();
  }
 ...
}

【讨论】：

【解决方案3】：

我解决它有点不同。这是一个城市自动完成的例子。首先我实现 AfterViewInit 并在 ngAfterView 方法中调用 google.api：

ngAfterViewInit() {
      var autocompleteElm = <HTMLInputElement>document.getElementById('autocomplete');
      var autocomplete = new google.maps.places.Autocomplete(
      (autocompleteElm), {
        types: ['(cities)']
      });
    }

如果有人感兴趣，我将 google api 加载到我的 index.html 文件中，并在类外的 Component 类文件中创建一个虚拟引用：

declare var google: any;

【讨论】：