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 文件，我正在尝试使用子组件内的变量，如下所示。