时间戳

首页 > 解决方案 > Angular - 将变量传递给 index.html 中的脚本

javascript - Angular - 将变量传递给 index.html 中的脚本

问题描述

我正在尝试将变量数组“系列”发送到 HTML 中的脚本。有什么办法吗？

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Map';

    series: any[];

    constructor() {

       this.series=[["RUS",50],["CAN",88],["CHE",21],["IND",43],
        ["GRL",21],["MEX",19],["FRA",60],["MAC",4],]
    }
}

app.component.html

  <h1>{{name}}</h1>

  <ul>
    <li *ngFor="let country of series">
      {{ country }}
    </li>
  </ul>

在index.html 中

...
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.js"></script>

<script>
    // -----------------------Need VARIABLES HERE-----------------------
    var series = [
        ["RUS",50],["CAN",88],["CHE",21],["IND",43],
        ["GRL",21],["MEX",19],["FRA",60],["MAC",4],];


    // Datamaps expect data in format:
    // { "USA": { "fillColor": "#42a844", numberOfWhatever: 75},
    //   "FRA": { "fillColor": "#8dc386", numberOfWhatever: 43 } }
    var dataset = {};

  ...

https://stackblitz.com/edit/angular-sk1gaf

标签： javascripthtmljqueryangular

解决方案

您可以通过注入document组件并为其分配如下变量来实现此目的：https ://stackblitz.com/edit/angular-a8xkz1

我相信你有你的理由，但我强烈反对这样做，为你的逻辑使用角度组件而不是 index.html

推荐阅读