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

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.json文件，如果您使用的是旧版本的angular-cli，则会对angular-cli.json文件进行更改。我将"../node_modules/jstree/dist/themes/default-dark/style.min.css"添加到styles属性数组中。

我还在scripts属性数组中添加了两个项：

"../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。