Plunker Version

Question

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的Problmen：

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

您可以通过复制粘贴HTML代码并在浏览器中运行该代码来尝试整个Google地图API，或者在Stackoverflow中使用“运行代码”代码段功能。

这是plunker的缩小版！ =＆GT;

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'
  ]
})

Answer 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 2，如何在index.html中访问DOM元素

Plunker Version

1 个答案: