Hvordan man tilføjer jstree til Angular 2-applikation ved hjælp af TypeScript med @types/jstree

Hej, jeg tror, det er en slags nybegynder-spørgsmål, men jeg er ny til ng2, så vær venlig at have tålmodighed med mig...

Jeg har gjort:

npm i jstree --save

Efter jeg oprettede en applikation ved hjælp af angular-cli.

Så installerede jeg:

npm i @types/jstree --save-dev

Og det er ved opsætningen, så prøvede jeg at bruge det, og ingen held.

Kan nogen venligst vise mig, hvordan man bruger det tredjepartsbibliotek med TypeScript

Svar #1

Her er de trin, jeg tog for at få det til at fungere. Jeg startede med en ny CLI-applikation.

npm install --save jquery jstree
npm install --save-dev @types/jquery @types/jstree

Jeg opdaterede derefter angular.json-filen; hvis du bruger en ældre version af angular-cli, skal du foretage ændringer i angular-cli.json-filen. Jeg tilføjede "../node_modules/jstree/dist/themes/default-dark/style.min.css" til arrayet for styles-egenskaben.

Jeg tilføjede også to elementer til scripts-egenskabens array: "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jstree/dist/jstree.min.js"

Jeg opdaterede derefter src/app/app.component.html til

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

Jeg opdaterer også src/app/app.component.ts til

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

Håber det hjælper!

Relaterede artikler