Определять и структурировать JavaScript в компоненте Angular

avatar
alperc
8 апреля 2018 в 10:53
92
1
0

maps.component.ts:

import { Component, OnInit } from '@angular/core';
import 'rxjs/Rx';

@Component({
    selector: 'maps',
    templateUrl: './maps.component.html',
    styles: []
})

export class MapsComponent implements OnInit {

    //constructor(){}

    ngOnInit(): void {
    }
}

и соответствующий maps.component.html:

<h2>Location of OPMs</h2>
<style>
    #map{
        height:400px;
        width:100%;
    }
</style>
<div id="map"></div>
<script src="initMaps.js"></script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=....&callback=initMap">
</script>

и initMaps.js:

function initMap(){
    // Map options
    var options = {
        zoom:8,
        center:{lat:42.3601,lng:-71.0589}
    }
    // New map
    var map = new google.maps.Map(document.getElementById('map'), options);
}

Загружая файл .html отдельно, карта отображается, однако с фреймворком angular этого не происходит. Как я могу определить эти сценарии так, чтобы карта загружалась, когда эта страница .html загружается в браузере?

Источник
user184994
8 апреля 2018 в 10:54
2

Теги сценария заблокированы внутри компонентов. Вам нужно будет добавить его в index.html или в массив scripts angular-cli.json, если вы используете angular cli

Mohammed Ilyass NASR
8 апреля 2018 в 12:19
1

Кроме того, вы можете получить определение типа карт Google с помощью npm install --save @types/googlemaps и импортировать их в свое приложение import {} from '@types/googlemaps'. Я предлагаю добавить логику инициализации вашей карты в ngOnInit(), чтобы сделать ваш код более читабельным и удобным в сопровождении. Эта статья хорошо объясняет это: blog.cloudboost.io/…

alperc
8 апреля 2018 в 13:40
0

хорошо, спасибо за ваши ответы.

Ответы (1)

avatar
kartik chawla
8 апреля 2018 в 13:46
0

В tsconfig.json добавьте es5 к lib следующим образом:

"lib": [
      "es2017",
      "dom",
      "es5"
    ]