如何使用带有 @types/jstree 的 typescript 将 jstree 添加到 angular 2 应用程序答案

【问题标题】：How to add jstree to angular 2 application using typescript with @types/jstree如何使用带有 @types/jstree 的 typescript 将 jstree 添加到 angular 2 应用程序
【发布时间】：2017-07-08 14:25:04
【问题描述】：

您好，我认为这是一个新手问题，但我是 ng2 的新手，所以请多多包涵...

我已经完成了：

npm i jstree --save

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

然后我安装了：

npm i @types/jstree --save-dev

这是在设置中，然后我尝试使用它，但没有成功。

请有人告诉我如何使用带有 typescript 的 3rd 方库

【问题讨论】：

3rd Party Library Installation
@R.Richards 不起作用
你检查过你的 package.json 吗？ .... 如果它在依赖项数组中包含 @types/jstree ，则安装您的第 3 方库。否则手动输入 "@types/jstree":"x.x.x"(version) 并运行 npm install。
@ShreenilPatel 伙计，我已经做到了。这不是我做的第一个项目。但它不会加载任何 jstree.min.js 依赖项

标签： angular typescript jstree

【解决方案1】：

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

npm install --save jquery jstree

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

然后我更新了 angular.json 文件，如果您使用的是旧版本的 angular-cli，请更改 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();
  }
}

希望这会有所帮助！

【讨论】：

这对其他 jQuery 组件也很有用！
它不能正常工作：stackblitz.com/edit/jstree-demo你能帮忙，我哪里错了吗？
@N.K 老实说，我不确定……抱歉。我在GitHub 上确实有一个完整的回购协议，它可能会对你有所帮助。它有两种方法可以实现这一点。一个类似于我上面的答案（所有相关行都被注释掉了）。不过，未注释掉的版本可能是更正确的方法。

【解决方案2】：

@IamStalker，看来我知道问题出在哪里。但是你能提供更多代码来展示你想如何使用它吗？

由于jstree依赖于jQuery，所以你也必须导入它。

您可能必须使用scripts 配置。

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

【讨论】：