在Angular 7中使用拖放创建待办事项列表

拖放是指将一个对象从一个位置移动到另一个位置。在网页开发中，拖放可以增强用户体验和交互性，本文将介绍如何在Angular 7中使用拖放创建待办事项列表。

安装Angular拖放模块

首先，需要安装Angular拖放模块。打开终端，输入以下命令：

npm install @angular/cdk@7.3.7 @angular/material@7.3.7

导入模块

在app.module.ts中导入Angular拖放模块，如下所示：

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  declarations: [
    AppComponent,
    TodoListComponent,
    TodoItemComponent
  ],
  imports: [
    BrowserModule,
    DragDropModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

创建待办事项列表

创建一个TodoListComponent组件，包含一个可拖放的待办事项列表，如下所示：

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-todo-list',
  template: `
    <div class="list">
      <div
        class="item"
        *ngFor="let item of items"
        cdkDrag
        cdkDragBoundary=".list"
        (cdkDragEnded)="dropItem($event)"
      >
        <app-todo-item [item]="item"></app-todo-item>
      </div>
    </div>
  `,
  styles: [
    `
      .list {
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 100vh;
        background-color: #f8f8f8;
        padding: 10px;
      }

      .item {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
        margin-bottom: 10px;
        padding: 10px;
        cursor: move;
      }
    `
  ]
})
export class TodoListComponent {
  items = [
    {
      name: 'Buy milk',
      done: false
    },
    {
      name: 'Go to gym',
      done: true
    },
    {
      name: 'Watch movie',
      done: false
    }
  ];

  dropItem(event: CdkDragDrop<any[]>) {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }
}

在TodoListComponent组件中，使用*ngFor循环渲染一个items数组，每个item对象包含一个name属性和一个done属性。使用cdkDrag指令启用拖放功能，使用cdkDragBoundary指令限制拖放区域。使用cdkDragEnded事件处理函数将拖放后的位置移动到新的位置。

创建待办事项组件

在TodoListComponent组件中，创建一个TodoItemComponent组件，作为待办事项的单项，如下所示：

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

@Component({
  selector: 'app-todo-item',
  template: `
    <div class="name">{{ item.name }}</div>
    <div class="done">{{ item.done ? 'Done' : 'Not Done' }}</div>
  `,
  styles: [
    `
      .name {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .done {
        color: #666;
      }
    `
  ]
})
export class TodoItemComponent {
  @Input() item: any;
}

在TodoItemComponent组件中，使用@Input()属性接收item对象，渲染name属性和done属性。

启动应用

使用Angular CLI启动应用，浏览器将显示待办事项列表，拖放待办事项可以更改顺序。

结论

本文介绍了如何在Angular 7中使用拖放创建待办事项列表。通过使用Angular拖放模块，创建待办事项列表和待办事项组件，并在TodoListComponent组件中使用*ngFor循环渲染列表，使用cdkDrag指令启用拖放功能，使用cdkDragBoundary指令限制拖放区域，使用cdkDragEnded事件处理函数将拖放后的位置移动到新的位置，提高了用户体验和交互性。