如何使用带@ types / jstree的打字稿向Angular 2应用程序添加jstree

Question

嗨，我相信这是一个关于新蜜蜂的问题，但是我对ng2还是陌生的，所以请多多包涵...

我弄完了：

npm i jstree --save

在我使用angular-cli创建应用程序之后。

然后我安装了：

npm i @types/jstree --save-dev

这就是设置过程，然后我尝试使用它，但是没有运气。

请有人能告诉我如何将第三方库与打字稿一起使用

Answer 1

这是我为使其正常工作所采取的步骤。 我从一个新的cli应用程序开始。

npm install --save jquery jstree

npm install --save-dev @types/jquery @types/jstree

然后，如果您使用的是angular-cli的旧版本，则我更新了angular.json文件，并对angular-cli.json文件进行了更改。 我在样式属性数组中添加了"../node_modules/jstree/dist/themes/default-dark/style.min.css" 。

我还在脚本属性数组中添加了两个项目： "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jstree/dist/jstree.min.js"

然后，我将src/app/app.component.html更新为

<div id="foo">
  <ul>
    <li>Root node 1
      <ul>
        <li>Child node 1</li>
        <li><a href="#">Child node 2</a></li>
      </ul>
    </li>
  </ul>
</div>

我还将src/app/app.component.ts更新为

import { Component, OnInit } from '@angular/core';

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    $('#foo').jstree();
  }
}

希望这可以帮助！

Answer 2

@IamStalker，看来我知道问题出在哪里。 但是，您可以提供更多代码以显示您如何使用它吗？

---

由于jstree依赖jQuery，因此您也必须导入它。

您可能必须使用scripts配置。

这里是参考： https : //github.com/angular/angular-cli/wiki/stories-global-scripts 。

Answer 3

derek的答案对我有用，我只需要像这样修改我的angular.json

样式：

node_modules/jstree/dist/themes/default/style.min.css

脚本：

"node_modules/jquery/dist/jquery.min.js",
"node_modules/jstree/dist/jstree.min.js"