如何使用 typescript 和 @types/jstree 将 jstree 添加到 Angular 2 应用程序

2023-12-14

嗨,我相信这是一个新手问题,但我是 ng2 的新手,所以请耐心等待......

我已经搞定了:

npm i jstree --save

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

然后我安装了:

npm i @types/jstree --save-dev

这就是设置,然后我尝试使用它,但没有成功。

请有人告诉我如何通过打字稿使用第三方库


以下是我为使其发挥作用而采取的步骤。 我从一个新的 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 属性数组。

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

然后我更新了src/app/app.component.html to

<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 to

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();
  }
}

希望这可以帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 typescript 和 @types/jstree 将 jstree 添加到 Angular 2 应用程序 的相关文章

随机推荐