How to add jstree to angular 2 application using typescript with @types/jstree

问题

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

I've done:

npm i jstree --save

After I created using angular-cli application.

Then I installed:

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

回答1:

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

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.

I also added two items into the scripts property array: "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jstree/dist/jstree.min.js"

I then updated 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>

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

Hope this helps!

回答2:

@IamStalker, it seems that i know what the problem is. But can you present more code to show how you want to use it?

As jstree depends on jQuery, you have to import it too.

You may have to use scripts config.

Here is the reference: https://github.com/angular/angular-cli/wiki/stories-global-scripts.

回答3:

The answer of derek works for me i just have to Modify my angular.json like this

Styles:

node_modules/jstree/dist/themes/default/style.min.css

Scripts:

"node_modules/jquery/dist/jquery.min.js",
"node_modules/jstree/dist/jstree.min.js"

来源：https://stackoverflow.com/questions/44987260/how-to-add-jstree-to-angular-2-application-using-typescript-with-types-jstree

标签

angular

typescript

jstree