时间戳

首页 > 解决方案 > 将 html 嵌入到 Angular 应用程序中

javascript - 将 html 嵌入到 Angular 应用程序中

问题描述

我已经编写了一个 html（包含它的 css 和 javascript），但我希望它采用正确的形式，所以我创建了一个 Angular 应用程序（带有 cli ng new bla）。[如果这很重要，html 包含一个地图。] 我确实复制粘贴到一个组件中并希望它可以工作，但是页面没有加载。那么如何将 html 嵌入到基本的 Angular 应用程序中呢？

谢谢

html中有两个脚本如下：

    <script>
  var map;
  var beijing = {lat: 39.9664333333333, lng: 116.469033333333};
  var markers = [];


function initMap() {
  fetch('153-20070724234145.csv')     // Read the file under the given address
  .then(re => re.text())      // Extract the text part of the response
  .then(function (data_array){
    data_array = parseTxt(data_array);      // Parse the read string data to an array
    map = new google.maps.Map(document.getElementById('map'), {     // initialize the map
    center: {lat: Number(data_array[1][0]), lng: Number(data_array[1][1])},
    zoom: 12});
    create_markers(data_array);     // Convert the array of lats and longs into a marker

    // Start visualisation
    var centerControlDiv = document.createElement('div');     // Create a new div in the html
    var centerControl = new CenterControl(centerControlDiv, map);
    centerControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

    // Clear Vis
    var clearControlDiv = document.createElement('div');
    var clearControl = new ClearControl(clearControlDiv, map);
    clearControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.LEFT_CENTER].push(clearControlDiv);
    }
  )
}
</script>

 <script src="https://maps.googleapis.com/maps/api/js?key=sdfkjjkf34kjn&callback=initMap"
async defer></script>

标签： javascripthtmlangularembed

解决方案

将标签正文中的 HTML 代码复制到component.html

将脚本复制到./src/index.html结束标记正文之前

将您的 css 放入./src/styles.css或将样式表复制到./src/index.html

编辑谷歌地图：

在你的角度项目中安装谷歌类型

npm install -D @types/googlemaps

在 index.html 中放在结束标记头之前

<script src="https://maps.googleapis.com/maps/api/js?key=changethis"></script>
<script>
function initMap() {
// your function...
}
</script>
</head>

在您的 component.ts 中（完整示例，仅复制您需要的内容）

import { Component, ViewChild, OnInit } from '@angular/core';
import { } from '@types/googlemaps';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('map') gmapElement: any;
  map: google.maps.Map;

  ngOnInit() {  
    this.initMap();

    // uncomment for alternative
    // this.initGoogleMaps();
  }

  initMap() {
    (window as any).initMap();
  }

  initGoogleMaps() {
    const mapProp = {
      center: new google.maps.LatLng(18.5793, 73.8143),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
  }
}

在您的 component.html 这是地图（替代）

<div #map style="width:100%;height:400px"></div>

在这种情况下，简单的路径是：load googlemaps api => load angular app => load component => call your init function

推荐阅读