如何使用带有@ types/jstree的打字稿向Angular 2应用程序添加jstree [英] How to add jstree to angular 2 application using typescript with @types/jstree

问题描述

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

Hi I believe it's some kind of a newbee question, but I'm new to ng2 so please bear with me...

我已经完成:

npm i jstree --save

使用angular-cli应用程序创建后.

After I created using angular-cli application.

然后我安装了:

npm i @types/jstree --save-dev

这已经设置好了，然后我尝试使用它，但是没有运气.

And that's on setup, then I tried to use it and no luck.

请有人能告诉我如何使用带有打字稿的第三方库

Please can someone show me how to use that 3rd party library with typescript

推荐答案

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

Here are the steps I took to get it to work. I started with a new cli application.

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

I then updated the angular.json file, if you are using an older version of angular-cli, makes changes to the angular-cli.json file. I added "../node_modules/jstree/dist/themes/default-dark/style.min.css" to the styles property array.

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

I also added two items into the scripts property array: "../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();
  }
}

希望这会有所帮助！

这篇关于如何使用带有@ types/jstree的打字稿向Angular 2应用程序添加jstree的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！