ngx-sortable-3 npm 包使用教程-JavaScript中文网-JavaScript教程资源分享门户

1. 简介

ngx-sortable-3 是一个 Angular 的拖放排序组件，用于对列表或表格元素进行排序操作。它可以与 Angular 的 FormsModule、ReactiveFormsModule 以及 NgxBootstrap 等模块一起使用。ngx-sortable-3 的底层实现基于 HTML5 的拖放 API，支持桌面端和移动端。

2. 安装

安装 ngx-sortable-3 的最新版本：

npm install ngx-sortable-3 --save

3. 使用

为了展示 ngx-sortable-3 的用法，我们将实现一个简单的列表应用。该应用包含一个可排序的列表和一个向列表中添加元素的表单。

3.1 组件 HTML

我们先定义一个 sortable-list 组件来渲染列表。该组件包括一个 ul 元素，它绑定到 list 变量，该变量是我们从父组件中传入的，并绑定到 ngx-sortable-list 指令。<li> 标签渲染了列表的每个元素，使用 *ngFor 循环遍历 list 数组。

<ul ngx-sortable-list="list" class="list-group">
  <li *ngFor="let item of list" class="list-group-item">
    {{ item }}
  </li>
</ul>

接下来，我们定义一个表单组件来添加新元素到列表中。

3.2 表单 HTML

下面是包含一个 input 元素和一个按钮的表单组件。点击按钮后，我们会触发一个 addToList 方法，将表单中的值添加到列表中。值从 itemName 变量中获取，这个变量我们将使用双向数据绑定，从而与输入框保持同步。

<div class="form-group">
  <label for="itemName">新元素</label>
  <input type="text" [(ngModel)]="itemName" class="form-control" id="itemName" name="itemName">
</div>
<button (click)="addToList()" class="btn btn-primary">添加到列表</button>

现在，我们将组件 sortable-list 和 add-item 组合在一起，实现最终的列表应用。

3.3 组合组件

下面是父组件 HTML。我们使用 sortable-list 组件作为 app.component 的一部分，并将 list 变量传递给该组件。add-item 组件实现填写表单的部分。

<div class="container">
  <h1>ngx-sortable-3 示例</h1>
  <app-add-item (addItem)="addItem($event)"></app-add-item>
  <app-sortable-list [list]="list"></app-sortable-list>
</div>

同时，我们需要在 app.component 中实现一些逻辑代码。

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
    <div class="container">
      <h1>ngx-sortable-3 示例</h1>
      <app-add-item (addItem)="addItem($event)"></app-add-item>
      <app-sortable-list [list]="list"></app-sortable-list>
    </div>
  `
})
export class AppComponent {
  list: Array<string> = ['元素1', '元素2', '元素3'];
  itemName = '';
 
  addItem(item: string): void {
    this.list.push(item);
    this.itemName = '';
  }
}

4. 示例代码

下面是完整的 sortable-list 和 add-item 组件的 TypeScript 代码。

import { Component, Input, Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-sortable-list',
  template: `
    <ul ngx-sortable-list="list" class="list-group">
      <li *ngFor="let item of list" class="list-group-item">
        {{ item }}
      </li>
    </ul>
  `
})
export class SortableListComponent {
  @Input() list: Array<string>;
}
 
@Component({
  selector: 'app-add-item',
  template: `
    <div class="form-group">
      <label for="itemName">新元素</label>
      <input type="text" [(ngModel)]="itemName" class="form-control" id="itemName" name="itemName">
    </div>
    <button (click)="addToList()" class="btn btn-primary">添加到列表</button>
  `
})
export class AddItemComponent {
  @Output() addItem: EventEmitter<string> = new EventEmitter<string>();
  itemName = '';
 
  addToList(): void {
    if (this.itemName.trim().length === 0) {
      return;
    }
    this.addItem.emit(this.itemName);
    this.itemName = '';
  }
}

5. 总结

我们使用 ngx-sortable-3 移植了一个简单的拖放排序应用程序，并执行了以下操作：

安装和导入 ngx-sortable-3
定义一个列表组件和一个表单组件
应用双向数据绑定来保持表单和变量同步
用父组件将两个组件组合在一起

ngx-sortable-3 提供了一种简单而强大的方式来实现拖动排序功能，可以很容易地用于 Angular 应用程序的开发中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53db8