Angular 6-從 JS 文件導入變量

Question

我正在使用 Angular 6 構建一個項目，該項目要求我從外部 js 文件導入樣式以構建自定義 Google 地圖。 但是，它似乎沒有正確導入到 my.ts 文件中。 任何幫助都會很棒！

在我的組件中

import {MapStyles} from './mapstyle.js'

@Component({
selector: 'map',
template: '<div #tref style="width:100%; height:100%;"></div>'
})

export class Map implements AfterViewInit {
  ...
  ngAfterViewInit() {
    console.log(MapStyles)  //is 'undefined'
  }
  const mapProperties = {
      styles: MapStyles
  };
}

我要導入的文件 (mapstyle.js)：

export var MapStyles = [
  {
  "featureType": "water",
  "elementType": "geometry.fill",
  "stylers": [
    {
      "color": "#d3d3d3"
    }]
  },
 ...

我試過諸如

import * as MapStyles from './mapstyle.js'

和

var MapStyles = [...]

但沒有運氣。 謝謝！

Answer 1

這就是在 Angular X 項目中導入和使用導入文件中的變量的方法。

地圖配置.ts

export const mapStyle = [
    {
        'elementType': 'labels.icon',
        'stylers': [
            {
                'visibility': 'off'
            }
        ]
    },
    {
        'featureType': 'poi.medical',
        'elementType': 'labels.icon',
        'stylers': [
            {
                'visibility': 'off'
            }
        ]
    }
];

地圖.components.ts

import { Component, OnInit } from '@angular/core';
import { mapStyle } from './map-config';

@Component({
  selector: 'app-map', 
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})

export class MapComponent implements OnInit {

  mapStyle = mapStyle;

  constructor() { 
    // 
  }

}

Answer 2

我正在考慮MapStyles是一個來自外部 js 文件的變量。

我有類似的要求，這就是我解決它的方式，

我已經從根組件加載了 javascript 文件，我正在嘗試使用子組件內的變量，如下所示。