如何在Angular 2中调用JavaScript

Question

我有一个来自assets/js/chartrank.js的JavaScript文件。

chartrank.js

function chartRank() {
    // do something
}

在rankuser组件中调用一个在其中定义的函数，但是它没有起作用。 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

ERROR ReferenceError: jsObject is not defined

请帮忙。

- nguyenhuyenag

---

尝试使用import * as jsObject from "../../assets/js/chartrank.js"进行导入操作。 - Shah

非常感谢，但是不起作用。 - nguyenhuyenag

你能为它创建一个 Plunker 吗？ - Shah

Answer 1

import在此处无效，因为chartrank.js没有导出任何内容。

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

.angular-cli.json

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

组件或服务

declare var chartRank: any;

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

  ...

  ngAfterViewInit() {
    chartRank();
  }
}

- Pengyy

Answer 2

创建一个带有 @Injectable 装饰器的模块，就像这样：

import {Injectable} from "@angular/core";
@Injectable()
export class MyClass{

  constructor() {}

  chartRank() {
    // do something
   }
}

然后在组件中

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

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

  constructor(private mc:MyClass) { }

  ngAfterViewInit() {
    mc.chartRank();
  }

  ngOnInit() {

  }
}

- brk