Question

我一直在关注角度4的开始。我在这里完成了整个页面https://angular.io/guide/quickstart。最后，我想通过添加新的外部js功能来试验甘特图。这是我要导入此快速入门项目的外部js框架：http://jsgantt.com/。现在我的问题是在index.html内部，我跟着添加了jsgantt框架的js / css文件但是角度应用程序没有拿起我的脚本。我通过在angular-cli.json文件的脚本中添加内容，但是当我按照如何使用jsgantt.js的指南时它仍然无法正常工作。 how to include external js file in angular 4 and call function from angular to js。任何人都可以帮助我，我对这些东西是全新的，并且不了解新的角度4的东西。我在2年前玩过angularjs，但我主要在java工作。

- 更新方法并使用 npm install --save js-gantt

我的angular-cli-json文件

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/js-gantt/dist/js-gantt.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

在我的app.component.ts文件中有以下内容：

import { Component } from '@angular/core';
import * as _ from 'js-gantt';

declare var GanttChart;

export class


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App';
}

如何在页面中使用此js-gantt？

Answer 1

运行npm install --save js-gantt 然后在您的angularCLI.json中添加以下行：

 "scripts": [
        "../node_modules/src/dist/js-gantt.min.js",
]

删除您在index.html中添加的内容现在，如果您想在页面中使用它，请执行以下操作：

import ...
.
declare var GanttChart;

export class YourClass{

yourFunction(){
    var chart = new GanttChart();

}
}

如何在角4

1 个答案: