【问题标题】：Angular 2, how to access DOM element in index.htmlAngular 2，如何访问 index.html 中的 DOM 元素
【发布时间】：2017-03-03 18:41:15
【问题描述】：

H，我试图从我的 Angular 2 组件访问我在 DOM (index.html) 中创建的 div 元素。

我要完成什么：选项1：

1：使用 jQuery 加载页面时隐藏 div 元素。

2：再次显示该元素，但在 Angular 2 组件内部。

选项 1 的问题：

我无法访问从 Angular 2 组件在 index.html 中创建的元素。

选项 2：

1：加载我的地图组件时加载我的谷歌地图脚本。

2：改为在我的组件内部创建 div googleMap。

选项 2 的问题：

我不能/不知道如何从组件内部加载外部 Javascript。

您可以通过复制粘贴 HTML 代码并在浏览器中运行来尝试整个 google maps API，或者使用 Stackoverflow 中的 Run Code sn-p 函数。

这是 plunker 的缩小版！ =>

Plunker Version

感谢您的耐心，如果有不清楚的地方，请询问。

<html>
  <head>
    <base href='/'>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- You will need styles to show the map -->
    <style>
      #googleMap{
        width: 400px;
        height: 400px;
        border: 1px solid green;
      }
    </style>
    <!-- jQuery API -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

    <!-- Google Maps -->
    <!-- Marker cluster api to be able to add many pointers to google maps -->
    <script
      src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>

    <!-- Google maps UI -->
      <script
        async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRkoeyhWeokhDYDzGPJoBExYdVDi9FbzE&callback=initMap">
      </script>

    <!--
      This script loads from inside the URL 3 lines above this line
      to trigger and write out our map inside the googleMap div
    -->
    <script>
    function initMap() {

      var map = new google.maps.Map(document.getElementById('googleMap'), {
        zoom: 10,
        center: {lat: 57.715567, lng: 11.984026}
      });

      // Create an array of alphabetical characters used to label the markers.
      var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

      // Add some markers to the map.
      // Note: The code uses the JavaScript Array.prototype.map() method to
      // create an array of markers based on a given "locations" array.
      // The map() method here has nothing to do with the Google Maps API.
      var markers = locations.map(function(location, i) {
        return new google.maps.Marker({
          position: location,
          label: labels[i % labels.length]
        });
      });

      // Add a marker clusterer to manage the markers.
      var markerCluster = new MarkerClusterer(map, markers,
          {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
    }
    var locations = [
      /******
      **
      ** Sweden cordinates
      **
      ******/
      {lat: 57.683522, lng: 12.002759},
      {lat: 57.700674, lng: 11.974408},
      {lat: 57.681494, lng: 12.003012},
      {lat: 57.678302, lng: 12.005312},
      {lat: 57.656136, lng: 12.016982},
      {lat: 57.656122, lng: 12.019364},
      {lat: 57.649467, lng: 12.002159},
      {lat: 57.646449, lng: 11.996659},
      {lat: 57.641077, lng: 12.009796},
      {lat: 57.612011, lng: 11.929612},
      {lat: 57.709454, lng: 11.704358},
      {lat: 57.715483, lng: 11.782698},
      {lat: 57.716376, lng: 11.778341},
      {lat: 57.701065, lng: 11.913668},
      {lat: 57.701065, lng: 11.913668},
      {lat: 57.706186, lng: 11.937175},
      {lat: 57.707057, lng: 11.939428},
      {lat: 57.705784, lng: 11.941048},
      {lat: 57.705108, lng: 11.938044},
      {lat: 57.706579, lng: 11.936004},
      {lat: 57.705884, lng: 11.936366},
      {lat: 57.705522, lng: 11.939739},
      {lat: 57.713506, lng: 11.948909},
      {lat: 57.732862, lng: 11.955038},
      {lat: 57.788828, lng: 12.022301},
      {lat: 57.797326, lng: 12.051568},
      {lat: 57.739628, lng: 12.134029},
      {lat: 57.703938, lng: 11.967092},
      {lat: 57.705761, lng: 11.969560},
      {lat: 57.709389, lng: 11.967522}
    ];
    </script>

    <!-- Added hide and show buttons temporarly for testing DOM access -->
    <script defer>
      $(document).ready(function(){
          jQuery("#hide").click(function(){
              $("#googleMap").hide();
          });
          jQuery("#show").click(function(){
              $("#googleMap").show();
          });
      });
    </script>

  </head>
  <!-- 3. Display the application -->
  <body>

    <!-- Main app component -->
    <my-app>Main app Loading...</my-app>

      <!-- Google maps UI (temp location) -->
      <div #googleMapViewChild id="googleMap"></div>

      <button id="hide">Hide Map</button>
      <button id="show">Show Map</button>

  </body>
</html>

import {  Component, OnInit, Renderer, ContentChild, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

declare var componentHandler: any;
declare var jQuery:any;
   
@Component({
  selector: 'maps',
  template: `
     <!-- This is what I want to accomplish and load the map from 
          inside this component, but I dont know how to refresh or 
          load the external Javascript from an component. 
      -->
     <div id="googleMap"></div>
  ´,
  styleUrls: [
      'app/maps/maps.component.css'
  ]
})

【问题讨论】：

标签： html google-maps dom angular google-maps-markers

【解决方案1】：

我认为你最好不要将 angular2 与 jQuery 混合。只需将您的地图放入您的组件并以角度方式进行：

@Componnet({
  selector: 'maps',
  template: '<div>
    <div #googleMapViewChild id="googleMap" *ngIf="visible"></div>
    <button (click)="visible=true">show</button>
    <button (click)="visible=false">hide</button>'
})
export class MapsComponent {
  visible: boolean = true;
}

【讨论】：

问题是 Angular 无法在 Angular 组件中找到谷歌地图 API，所以即使我制作了一个 div googleMap，我们的 google-maps.service.js 脚本也没有任何 ide我们组件中的一个 div。
plunker 备份后，我将在那里展示一个包含所有 Angular 代码的演示，以便人们看到全局并理解问题。
我现在添加了一个plunker版本。
好的。 plunkr 可以提供帮助。您的意思是该脚本可以运行还是 getElementById 失败（这是合乎逻辑的，因为您还没有该元素）？