Javascript 在angular应用程序中嵌入html

我已经写了一个html（包括它的css和javascript），但我希望它是一个正确的形式，所以我创建了一个angular应用程序（使用cling 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>

var映射；
var北京={lat:39.9664333，lng:116.469033333}；
var标记=[]；
函数initMap（）{
fetch（'153-20070724234145.csv'）//读取给定地址下的文件
.then（re=>re.text（））//提取响应的文本部分
.then（函数（数据数组）{
data_array=parseTxt（data_array）；//将读取的字符串数据解析为数组
map=new google.maps.map（document.getElementById（'map'），{//初始化映射
中心：{lat:Number（数据_数组[1][0]），lng:Number（数据_数组[1][1]），
缩放：12}）；
创建_标记（数据_数组）；//将lat和long数组转换为标记
//开始想象
var centerControlDiv=document.createElement（'div'）；//在html中创建一个新的div
var centerControl=新的centerControl（centerControlDiv，map）；
centerControlDiv.index=1；
map.controls[google.maps.ControlPosition.TOP\u CENTER].push（centerControlDiv）；
//清晰可见
var clearControlDiv=document.createElement（'div'）；
var clearControl=新的clearControl（clearControlDiv，map）；
clearControlDiv.index=1；
控件[google.maps.ControlPosition.LEFT_CENTER].push（clearControlDiv）；
}
)
}

将标记体中的HTML代码复制到

组件.HTML

在结束标记体之前，将脚本复制到

/src/index.html

将css放入

/src/styles.css

或将样式表复制到

/src/index.html

为谷歌地图编辑：

在yout angular项目中安装google类型

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.html中，这是映射（可选）

---

在本例中，简单的路径是：load googlemaps api=>load angular app=>load component=>call your init function

您只需使用一个html文件并将其链接到一个组件谢谢您的回答。html包含其标题和标记（等）。它是否需要打包到div或类似的东西中？除了

标记中的标记外，您需要删除所有标记，否则它将无法正常工作。加载了div标记，但缺少其他两个脚本。它们需要转换成typescript吗？什么脚本？你能把它们添加到你的问题中吗？答案是than！我确实将脚本复制到了app.component.html的src/index和div标记中，当我需要代码时，我看到它们在那里，但是地图没有加载。这看起来是一个非常好的答案，我做到了，你说的，但是有一个小问题。即使我安装了这个types/googlemaps包，我也无法从@types/googlemaps导入地图，因为找不到它。是否还有其他依赖项？在component.html中，是否有div

？。导入必须是空的{}在这种情况下是的，我已经尝试将它放在index.html和组件的html中。在inspector中，它们似乎是存在的，但map并没有被加载。帮助您的唯一方法是在中上载一个示例并共享url

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);
  }
}

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