wie SlickGrid (jQuery Legacy-Bibliothek) in Angular 4

Ich versuche, eine ältere jQuery-Bibliothek namens SlickGrid in Angular 4 arbeiten und ich kann nicht scheinen, herauszufinden, die beste Möglichkeit, das zu tun (ich bin auch neu zu Angular 4, so dass es nicht hilft). Bisher habe ich ein npm-Paket für @types/slickgrid gefunden und installiert. Ich versuche es dann mit diesemwie SlickGrid (jQuery Legacy-Bibliothek) in Angular 4

import { Component, OnInit } from '@angular/core'; 
import * as $ from 'jquery'; 
import {Grid} from 'slickgrid';

in meiner Komponente zu importieren Doch diese wirft mir einige Fehler in der Konsole

app.component.ts(5,24): error TS2306: File 'C:/demo/node_modules/@types/slickgrid/index.d.ts' is not a module.

ich auch mit diesem import 'slickgrid' versucht, aber ich habe den gleichen Fehler

hier ist meine volle component.ts Datei

import { Component, OnInit } from '@angular/core'; 
import * as $ from 'jquery'; 
import {Grid} from 'slickgrid'; 

@Component({ 
    selector: 'my-app', 
    template: `<td valign='top' width='50%'> 
     <div id='myGrid' style='width:600px;height:500px;'></div> 
    </td>` 
}) 
export class AppComponent implements OnInit { 

    ngOnInit(): void { 
     let grid; 
     let columns = [ 
     {id: 'title', name: 'Title', field: 'title'}, 
     {id: 'duration', name: 'Duration', field: 'duration'}, 
     {id: '%', name: '% Complete', field: 'percentComplete'}, 
     {id: 'start', name: 'Start', field: 'start'}, 
     {id: 'finish', name: 'Finish', field: 'finish'}, 
     {id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven'} 
     ]; 
     let options = { 
     enableCellNavigation: true, 
     enableColumnReorder: false 
     }; 
     let data = []; 
     for (let i = 0; i < 500; i++) { 
     data[i] = { 
      title: 'Task ' + i, 
      duration: '5 days', 
      percentComplete: Math.round(Math.random() * 100), 
      start: '01/01/2009', 
      finish: '01/05/2009', 
      effortDriven: (i % 5 === 0) 
     }; 
     } 
     $(() => { 
     grid = new Grid('#myGrid', data, columns, options); 
     }); 
    } 
}

Und meine index.html, wo ich die Bibliotheken importieren (ich konnte schließlich mit WebPack gehen, wenn ich diesen Weg machen kann)

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="styles.css"/> 
    <link rel="stylesheet" type="text/css" href="/node_modules/slickgrid-6pac/slick.grid.css"/> 
    <link rel="stylesheet" type="text/css" href="/components/css/SlickGrid.css"/> 
    </head> 
    <body> 
     <my-app> Loading... </my-app> 
    </body> 
    <script src="/node_modules/slickgrid-6pac/lib/jquery-1.11.2.js"></script> 
    <script src="/node_modules/slickgrid-6pac/lib/jquery.event.drag-2.2.js"></script> 
    <script src="/node_modules/underscore/underscore-min.js"></script> 
    <script src="/node_modules/slickgrid-6pac/slick.core.js"></script> 
    <script src="/node_modules/slickgrid-6pac/slick.grid.js"></script> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="/node_modules/core-js/client/shim.min.js"></script> 
    <script src="/node_modules/zone.js/dist/zone.min.js"></script> 
    <script src="/node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="/node_modules/systemjs/dist/system.src.js"></script> 
    <script src="/dist/basic_slickgrid_ts/systemjs.config.js"></script> 
    <script> 
    System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
</html>

ich wirklich diese Arbeit bekommen müssen, und ich weiß nicht, was anderes zu versuchen.

Quelle

2017-09-01 ghiscoding

Sie können nicht Typisierungen nähern Link könnte nützlich [link] (https://rahulrsingh09.github.io/AngularConcepts/faq) sein. die eine Frage, die Drittanbieter-js ohne Typisierung verbindet –

danke ich würde es auf jeden Fall betrachten, scheint noch besser, da ich nicht auf eine Typdefinition verlassen müssen, die veraltet sein könnte. – ghiscoding

erstaunlich, ich habe es funktioniert, wenn Sie es als Antwort posten möchte würde ich sicherlich akzeptieren und upvote es. Vielen Dank – ghiscoding

Vielen Dank @Rahul Singh, der einen Kommentar gepostet hat, der meine Frage beantwortet.

installieren Angular-CLI und ändern Sie die angular-cli.json Datei

{ 
    "apps": [ 
    { 
    "styles": [ 
     "../node_modules/slickgrid/slick.grid.css", 
     "styles.css" 
    ], 
    "scripts": [ 
     "../node_modules/slickgrid/lib/jquery-1.8.3.js", 
     "../node_modules/slickgrid/lib/jquery.event.drag-2.2.js", 
     "../node_modules/slickgrid/slick.core.js", 
     "../node_modules/slickgrid/slick.grid.js" 
    ],  
}

Sie eine npm der Legacy-Bibliothek installieren

npm install slickgrid

<div> in der component.html Datei für das Raster hinzufügen

<div id='myGrid' style='width:600px;height:500px;'></div>

und schließlich die component.ts

import { Component, OnInit } from '@angular/core'; 
import $ from 'jquery/dist/jquery'; 
import jQuery from 'jquery/dist/jquery'; 

// using external js modules in Angular 
declare var Slick: any; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    title = 'app'; 

    ngOnInit(): void { 
     let grid; 
     const columns = [ 
     {id: 'title', name: 'Title', field: 'title'}, 
     {id: 'duration', name: 'Duration', field: 'duration'}, 
     {id: '%', name: '% Complete', field: 'percentComplete'}, 
     {id: 'start', name: 'Start', field: 'start'}, 
     {id: 'finish', name: 'Finish', field: 'finish'}, 
     {id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven'} 
     ]; 
     const options = { 
     enableCellNavigation: true, 
     enableColumnReorder: false 
     }; 
     let data = []; 
     for (let i = 0; i < 500; i++) { 
     data[i] = { 
      title: 'Task ' + i, 
      duration: '5 days', 
      percentComplete: Math.round(Math.random() * 100), 
      start: '01/01/2009', 
      finish: '01/05/2009', 
      effortDriven: (i % 5 === 0) 
     }; 
     } 
     $(() => { 
     grid = new Slick.Grid('#myGrid', data, columns, options); 
     }); 
    } 
}

und es funktioniert, wieder dank @Rahul

Quelle

2017-09-01 23:08:23 ghiscoding

tolle Arbeit @ghiscoding +1 –

Ich brauchte nur eine Richtlinie, danke @Rahul – ghiscoding

nur um hier zu chimmen, ich behalte die aktivste Branche (6pac). Ich bekomme regelmäßig Anfragen nach einer gepackten Version, aber ich habe nichts mit npm zu tun, außer dem sehr einfachen, ich weiß nicht wirklich, wie man ein Paket richtig baut. Wenn jemand, der npm oder einen der anderen Paketmanager kennt, ein Paket zusammenstellen möchte, vorzugsweise eines, das die Codebasis für Entwickler, die einen anderen (oder keinen) Paketmanager verwenden, nicht stört, würde ich mich freuen, es zu integrieren mein Github Repo. –

wie SlickGrid (jQuery Legacy-Bibliothek) in Angular 4

Antwort

Verwandte Themen