Question

我正在angular2 +模板UI中显示维恩图。我通过将文件导入.ts代码来调用javascript文件来实现此目的。但是这些值是静态的，直接取自同一javascript文件。喜欢-

venn-example.js

 var sets = [ {sets: ['A'], size: 12},
             {sets: ['B'], size: 12},
             {sets: ['A','B'], size: 2}];

var chart = venn.VennDiagram();
d3.select("#venn").datum(sets).call(chart);

但是，在这里我希望集合的值来自angular.ts文件。

app.component.ts

const url = '../../../../assets/venn.example.js';

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


export class NodeVennComponent implements OnInit {

  loadAPI: Promise<any>;
  sets

  constructor() { }

  ngOnInit() {


  }


 //code to load Javascript.

  public buttonClicked() {
    this.loadAPI = new Promise((resolve) => {
        console.log('resolving promise...');
        this.loadScript();
    });
  }

  public loadScript() {
    console.log('preparing to load...')
    let node = document.createElement('script');
    node.src = url;
    node.type = 'text/javascript';
    node.async = true;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
  }


  seekAPI() {


    console.log("INSIDE  seekAPI() ")


            this.allAPI = [{ sets: ['channel'], size: 12 },
{ sets: ['incidentCity'], size: 12 },
{ sets: ['channel', 'incidentCity'], size: 2 }];

       }             
        }

      }

我希望从javascript venn.js文件中设置的值从app.ts文件中分配this.allAPI的值

即

 var sets = this.allAPI;

请帮助。如何关联/传递这样的值。

Answer 1

您可以使用全局变量。

在ts上设置：

 window["allAPI"] = this.allAPI

在js上使用：

 var sets = window["allAPI"];

不是最干净的方法，但是很快。

如何将值从angular .ts文件传输到javascript .js文件

1 个答案: