Integration mit Angular
Dieser Leitfaden setzt Kenntnisse der Angular-Konzepte und -Muster voraus. Als Hintergrund empfiehlt sich die Angular-Dokumentation.
DHTMLX Kanban ist mit Angular kompatibel. Das vollständige Codebeispiel ist auf GitHub verfügbar.
Projekt erstellen
Installieren Sie Angular CLI und Node.js, bevor Sie das Projekt anlegen.
Der folgende Befehl erstellt ein neues Projekt my-angular-kanban-app mit Angular CLI:
ng new my-angular-kanban-app
Deaktivieren Sie Server-Side Rendering (SSR) und Static Site Generation (SSG/Prerendering) auf Nachfrage, damit das Projekt mit dieser Anleitung übereinstimmt.
Der Befehl installiert alle notwendigen Tools. Weitere Schritte sind nicht erforderlich.
Abhängigkeiten installieren
Wechseln Sie in das neu erstellte App-Verzeichnis:
cd my-angular-kanban-app
Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit dem yarn Paketmanager:
yarn
yarn start
Die App läuft unter einer lokalen Adresse (zum Beispiel http://localhost:3000).
Kanban erstellen
Stoppen Sie den Entwicklungsserver und installieren Sie das Kanban-Paket.
Schritt 1. Paket installieren
Laden Sie das Trial-Kanban-Paket herunter und folgen Sie den Schritten in der README-Datei. Die Trial-Version ist 30 Tage verfügbar.
Schritt 2. Komponente erstellen
Erstellen Sie eine Angular-Komponente, die Kanban und die Toolbar einbindet. Erstellen Sie den Ordner src/app/kanban/ und fügen Sie darin eine Datei kanban.component.ts hinzu.
Quellcodedateien importieren
Öffnen Sie kanban.component.ts und importieren Sie die Kanban-Quelldateien. Der Importpfad hängt von der Paketversion ab:
- Für die PRO-Version, die aus einem lokalen Ordner installiert wird:
import { Kanban, Toolbar } from 'dhx-kanban-package';
- Für die Trial-Version:
import { Kanban, Toolbar } from '@dhx/trial-kanban';
Dieses Tutorial verwendet die Trial-Version von Kanban.
Container einrichten und Kanban initialisieren
Um Kanban mit der Toolbar anzuzeigen, richten Sie zwei Container ein und rufen Sie die Konstruktoren auf. Der folgende Code definiert das Komponenten-Template, referenziert die Container und erstellt die Instanzen:
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: "kanban", // ein Template-Name, der in "app.component.ts" als <kanban /> verwendet wird
styleUrls: ["./kanban.component.css"], // CSS einbinden
template: `<div class = "component_container">
<div #toolbar_container></div>
<div #kanban_container class = "widget"></div>
</div>`
})
export class KanbanComponent implements OnInit, OnDestroy {
// Container für Toolbar initialisieren
@ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
// Container für Kanban initialisieren
@ViewChild("kanban_container", { static: true }) kanban_container!: ElementRef;
private _kanban!: Kanban;
private _toolbar!: Toolbar;
ngOnInit() {
// Kanban-Komponente initialisieren
this._kanban = new Kanban(this.kanban_container.nativeElement, {});
// Toolbar-Komponente initialisieren
this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
api: this._kanban.api,
// weitere Konfigurationseigenschaften
});
}
ngOnDestroy(): void {
this._kanban.destructor(); // Kanban zerstören
this._toolbar.destructor(); // Toolbar zerstören
}
}
Styles hinzufügen
Fügen Sie Styles für Kanban und den Container hinzu. Erstellen Sie die Datei kanban.component.css im Verzeichnis src/app/kanban/:
/* Kanban-Styles importieren */
@import "@dhx/trial-kanban/dist/kanban.css";
/* Styles für die Startseite */
html,
body{
height: 100%;
padding: 0;
margin: 0;
}
/* Styles für Kanban- und Toolbar-Container */
.component_container {
height: 100%;
margin: 0 auto;
}
/* Styles für Kanban-Container */
.widget {
height: calc(100% - 56px);
}
Daten laden
Um Kanban mit Daten zu befüllen, stellen Sie einen Datensatz bereit. Erstellen Sie die Datei data.ts im Verzeichnis src/app/kanban/:
export function getData() {
const columns = [
{
label: "Backlog",
id: "backlog"
},
{
label: "In progress",
id: "inprogress"
},
// ...
];
const cards = [
{
id: 1,
label: "Integration with Angular/React",
priority: 1,
color: "#65D3B3",
start_date: new Date("01/07/2021"),
users: [3, 2],
column: "backlog",
type: "feature",
},
{
label: "Archive the cards/boards ",
priority: 3,
color: "#58C3FE",
users: [4],
progress: 1,
column: "backlog",
type: "feature",
},
// ...
];
const rows = [
{
label: "Feature",
id: "feature",
},
{
label: "Task",
id: "task",
}
];
return { columns, cards, rows };
}
Öffnen Sie kanban.component.ts, importieren Sie den Datensatz und übergeben Sie die Dateneigenschaften an das Kanban-Konfigurationsobjekt innerhalb von ngOnInit():
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import { getData } from "./data"; // Daten importieren
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: "kanban",
styleUrls: ["./kanban.component.css"],
template: `<div class = "component_container">
<div #toolbar_container></div>
<div #kanban_container class = "widget"></div>
</div>`
})
export class KanbanComponent implements OnInit, OnDestroy {
@ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
@ViewChild("kanban_container", { static: true }) kanban_container!: ElementRef;
private _kanban!: Kanban;
private _toolbar!: Toolbar;
ngOnInit() {
const { cards, columns, rows } = getData(); // Daten initialisieren
this._kanban = new Kanban(this.kanban_container.nativeElement, {
columns, // Spaltendaten anwenden
cards, // Kartendaten anwenden
rows, // Zeilendaten anwenden
rowKey: "type",
// weitere Konfigurationseigenschaften
});
this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
api: this._kanban.api,
// weitere Konfigurationseigenschaften
});
}
ngOnDestroy(): void {
this._kanban.destructor();
this._toolbar.destructor();
}
}
Alternativ können Sie die Daten nach der Instanzerstellung mit setConfig() oder parse() innerhalb von ngOnInit() laden:
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import { getData } from "./data"; // Daten importieren
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
selector: "kanban",
styleUrls: ["./kanban.component.css"],
template: `<div class = "component_container">
<div #toolbar_container></div>
<div #kanban_container class = "widget"></div>
</div>`
})
export class KanbanComponent implements OnInit, OnDestroy {
@ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
@ViewChild("kanban_container", { static: true }) kanban_container!: ElementRef;
private _kanban!: Kanban;
private _toolbar!: Toolbar;
ngOnInit() {
const { cards, columns, rows } = getData(); // Daten initialisieren
this._kanban = new Kanban(this.kanban_container.nativeElement, {
columns: [],
cards: [],
rows: [],
rowKey: "type",
// weitere Konfigurationseigenschaften
});
this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
api: this._kanban.api,
// weitere Konfigurationseigenschaften
});
// Daten über die setConfig()- oder parse()-Methode anwenden
this._kanban.setConfig({
columns,
cards,
rows
});
}
ngOnDestroy(): void {
this._kanban.destructor();
this._toolbar.destructor();
}
}
Die Kanban-Komponente ist jetzt einsatzbereit. Wenn das Element gerendert wird, initialisiert sich Kanban mit den Daten. Die vollständige Liste der unterstützten Konfigurationseigenschaften finden Sie in der Kanban API-Referenz.
Ereignisse behandeln
Benutzeraktionen in Kanban lösen Ereignisse aus. Verwenden Sie Event-Listener, um auf bestimmte Aktionen zu reagieren. Die vollständige Liste finden Sie in der Kanban-Ereignisreferenz.
Öffnen Sie kanban.component.ts und erweitern Sie die Methode ngOnInit():
// ...
ngOnInit() {
this._kanban = new Kanban(this.kanban_container.nativeElement, {});
this._kanban.api.on("add-card", (obj) => {
console.log(obj.columnId);
});
}
ngOnDestroy(): void {
this._kanban.destructor();
}
Schritt 3. Kanban zur App hinzufügen
Um die KanbanComponent in der App zu registrieren, öffnen Sie src/app/app.component.ts und ersetzen Sie den Standardcode:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `<kanban/>`
})
export class AppComponent {
name = "";
}
Erstellen Sie app.module.ts im Verzeichnis src/app/ und deklarieren Sie die KanbanComponent:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { KanbanComponent } from "./kanban/kanban.component";
@NgModule({
declarations: [AppComponent, KanbanComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule {}
Öffnen Sie src/main.ts und ersetzen Sie den vorhandenen Code:
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
Starten Sie die App, um das befüllte Kanban-Board auf der Seite anzuzeigen.
Das vollständige Projekt finden Sie auf GitHub.