Ngx-Bootstrap - Sortierbar

Die sortierbare Komponente ngx-bootstrap bietet eine konfigurierbare sortierbare Komponente mit Drag-Drop-Unterstützung.

SortableComponent

Wähler

  • bs-sortable

Eingänge

  • fieldName - Zeichenfolge, Feldname, wenn das Eingabearray aus Objekten besteht.

  • itemActiveClass - Zeichenfolge, Klassenname für aktives Element.

  • itemActiveStyle- {[key: string]: string; }, Stilobjekt für aktives Element.

  • itemClass - Zeichenfolge, Klassenname für Element

  • itemStyle - Zeichenfolge, Klassenname für Element

  • itemTemplate- TemplateRef <any>, mit dem eine benutzerdefinierte Elementvorlage angegeben wird. Vorlagenvariablen: Element und Index;

  • placeholderClass - Zeichenfolge, Klassenname für Platzhalter

  • placeholderItem - Zeichenfolge, Platzhalterelement, das angezeigt wird, wenn die Sammlung leer ist

  • placeholderStyle - Zeichenfolge, Stilobjekt für Platzhalter

  • wrapperClass - Zeichenfolge, Klassenname für Artikelverpackung

  • wrapperStyle- {[key: string]: string; }, Stilobjekt für Artikel-Wrapper

Ausgänge

  • onChange- Wird beim Arraywechsel (Neuordnen, Einfügen, Entfernen) ausgelöst, genau wie ngModelChange. Gibt die Sammlung neuer Artikel als Nutzlast zurück.

Beispiel

Da wir eine sortierbare Datei verwenden werden, müssen wir app.module.ts aktualisieren, das im Kapitel ngx-bootstrap Rating verwendet wirdSortableModule und DraggableItemService.

Aktualisieren Sie app.module.ts, um SortableModule und DraggableItemService zu verwenden.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aktualisieren Sie styles.css, um Stile für sortierbare Komponenten zu verwenden.

Styles.css

.sortableItem {
   padding: 6px 12px;
   margin-bottom: 4px;
   font-size: 14px;
   line-height: 1.4em;
   text-align: center;
   cursor: grab;
   border: 1px solid transparent;
   border-radius: 4px;
   border-color: #adadad;
}

.sortableItemActive {
   background-color: #e6e6e6;
   box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.sortableWrapper {
   min-height: 150px;
}

Aktualisieren Sie test.component.html, um die sortierbare Komponente zu verwenden.

test.component.html

<bs-sortable
   [(ngModel)]="items"
   fieldName="name"
   itemClass="sortableItem"
   itemActiveClass="sortableItemActive"
   wrapperClass="sortableWrapper">
</bs-sortable>

Aktualisieren Sie test.component.ts für entsprechende Variablen und Methoden.

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   items = [
      {
         id: 1,
         name: 'Apple'
      },
      {
         id: 2,
         name: 'Orange'
      },
      {
         id: 3,
         name: 'Mango'
      }
   ];
   constructor() {}
   ngOnInit(): void {
   } 
}

Bauen und dienen

Führen Sie den folgenden Befehl aus, um den Winkelserver zu starten.

ng serve

Sobald der Server betriebsbereit ist. Öffnen Sie http: // localhost: 4200.