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

Question

我正在尝试将变量数组“系列”发送到 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>

内部索引.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

Answer 1

您可以通过将document注入组件并为其分配一个变量来实现这一点： https://stackblitz.com/edit/angular-a8xkz1

我相信你有你的理由，但我强烈反对这样做，使用 angular 组件代替 index.html