如何在Angular 2上调用JavaScript [英] How to call javascript on angular 2

问题描述

我有来自asset/js/chartrank.js的javascript文件

I have javascript file from assets/js/chartrank.js

chartrank.js

function chartRank() {
    // do something
}

并在 rankuser 组件上调用在其中定义的函数，但这不起作用.

and call a function defined in it on rankuser component but it doesn't work.

rankuser.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import "../../assets/js/chartrank.js";
declare var jsObject: any;

@Component({
  selector: 'app-rankuser',
  templateUrl: './rankuser.component.html',
  styleUrls: ['./rankuser.component.css']
})
export class RankuserComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngAfterViewInit() {
    jsObject.chartRank();
  }

  ngOnInit() {

  }
}

错误

ERROR ReferenceError: jsObject is not defined

请帮助.

推荐答案

import 在这里不起作用，因为 chartrank.js 不导出任何内容.

import doesn't work here because chartrank.js doesn't export anything.

这里最简单的方法是将 chartrank.js 添加到 .angular-cli.json 的 scripts 数组中，并声明 chartRank (函数名称)作为全局变量.

The simplest way here is adding chartrank.js to .angular-cli.json's scripts array, and declare the chartRank(function name) as a global variable.

.angular-cli.json

.angular-cli.json

"scripts": [
  "./assets/js/chartrank.js"
],

组件或服务

declare var chartRank: any;

@Component({
  ...
})
export class RankuserComponent implements OnInit, AfterViewInit {

  ...

  ngAfterViewInit() {
    chartRank();
  }
}

这篇关于如何在Angular 2上调用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！