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

Question

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

我已经完成了:

npm i jstree --save

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

然后我安装了:

npm i @types/jstree --save-dev

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

有人可以告诉我如何使用带有 typescript 的第 3 方库

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" 添加到样式属性数组。

我还在脚本属性数组中添加了两项:
“../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();
  }
}

希望这对您有所帮助!