Ich habe einige Angular 1-Erfahrung, aber wir müssen gridstack.js in einem Angular 2-Projekt verwenden .
Wir sind mit dem gridstack-eckigen Projekt vertraut, aber dieses Projekt ist in Angular 1. Ich denke, das größte Problem, mit dem ich Probleme habe, sind die Angular 2-Konzepte.
Jede Hilfe wäre willkommen.
Okay für Anfänger, Angular 2 Quickstart ist das beste.
Dann geht das weiter und bewegt sich in die Tour der Helden . Welches ist auch ein fantastisches Tutorial.
Für die Tutorials und ganz offen gesagt, um die ANY-App von Angular 2 zu bauen, würde ich sehr empfehlen, Angular-Cli Es macht den Aufbau von Angular 2 Apps zum Kinderspiel.
Sehen Sie sich doch einmal die Inhaltsverzeichnis um zu sehen, was es tun kann
my-grid-stack.component.html
%Vor%my-grid-stack.component.ts ( So erhalten Sie JQuery in Angular 2 )
%Vor% Dann würde ich die gridstack.js Datei in den src/assets/libs/gridstack Ordner legen.
Dann vergiss nicht, dein index.html
Am Ende haben wir zwei Direktiven erstellt: GridStackDirective und GridStackItemDirective -
grid-stack-directive.ts:
grid-stack-item-directive.ts:
app.component.html:
index.html:
Wir haben versucht, das Demo-Grid auf der gridstack.js-Webseite zu kopieren. Wenn Sie das ausführen und es so aussehen soll wie Sie, müssen Sie einige .css-Dateien, .js-Dateien usw. von ihrer Site abrufen.
Basierend auf der Antwort von @ user3758236 habe ich ein paar Komponenten entwickelt, anstatt nur Anweisungen zu haben:
interfaces.ts:
%Vor%grid-stack.component.ts:
%Vor%grid-stack-item.component.ts
%Vor%Die letztere Komponente verwendet einen Dienst für die dynamische Komponentenerstellung, den Sie in stackoverflow finden können.
Die Verwendung ist wie folgt:
%Vor%Tags und Links javascript angularjs jquery angular gridstack