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.