angular2自定义属性的使用？

Question

我遇到的问题是，我自己自定义的拖拽事件，在执行的过程中，拖拽的时候，组件之间的样式和定义的方法并没有执行。希望能帮我解决一下，谢谢了！！！

首先，是自定义的文件
drag.directive.ts

import {
  Directive,
  Input,
  ElementRef,
  Renderer2,
  HostListener
} from "@angular/core";
import { DragDropService } from "../drag-drop.service";

@Directive({
  selector: "[app-draggable][dragTag][draggedClass][dragData]"
})
export class DragDirective {
  private _isDraggable = false;
  @Input() dragTag: string;
  @Input() draggedClass: string;
  @Input() dragData: any;
  @Input("app-draggable")
  set isDraggable(draggable: boolean) {
    this._isDraggable = draggable;
    this.rd.setAttribute(this.el.nativeElement, "draggable", `${draggable}`);
  }

  get isDraggable() {
    return this._isDraggable;
  }

  constructor(
    private el: ElementRef,
    private rd: Renderer2,
    private service: DragDropService
  ) {}

  @HostListener("dragstart", ["$event"])
  onDragStart(ev: Event) {
    if (this.el.nativeElement === ev.target) {
      this.rd.addClass(this.el.nativeElement, this.draggedClass);
      this.service.setDragData({ tag: this.dragTag, data: this.dragData });
    }
  }

  @HostListener("dragend", ["$event"])
  onDragEnd(ev: Event) {
    if (this.el.nativeElement === ev.target) {
      this.rd.removeClass(this.el.nativeElement, this.draggedClass);
    }
  }
}
    

drop.directive.ts

import {
  Directive,
  Input,
  Output,
  EventEmitter,
  HostListener,
  ElementRef,
  Renderer2
} from "@angular/core";
import { DragDropService, DragData } from "../drag-drop.service";

@Directive({
  selector: "[app-droppable][dropTags][dragEnterClass]"
})
export class DropDirective {
  @Output() dropped: EventEmitter<DragData> = new EventEmitter();
  @Input() dropTags: string[] = [];
  @Input() dragEnterClass = "";
  private drag$;

  constructor(
    private el: ElementRef,
    private rd: Renderer2,
    private service: DragDropService
  ) {
    this.drag$ = this.service.getDragData().take(1);
  }

  @HostListener("dragenter", ["$event"])
  onDragEnter(ev: Event) {
    ev.preventDefault();
    ev.stopPropagation();
    if (this.el.nativeElement === ev.target) {
      this.drag$.subscribe(dragData => {
        if (this.dropTags.indexOf(dragData.tag) > -1) {
          this.rd.addClass(this.el.nativeElement, this.dragEnterClass);
        }
      });
    }
  }

  @HostListener("dragover", ["$event"])
  onDragOver(ev: Event) {
    ev.preventDefault();
    ev.stopPropagation();
    if (this.el.nativeElement === ev.target) {
      this.drag$.subscribe(dragData => {
        if (this.dropTags.indexOf(dragData.tag) > -1) {
          this.rd.setProperty(ev, "dataTransfer.effectAllowed", "all");
          this.rd.setProperty(ev, "dataTransfer.dropEffect", "move");
        } else {
          this.rd.setProperty(ev, "dataTransfer.effectAllowed", "none");
          this.rd.setProperty(ev, "dataTransfer.dropEffect", "none");
        }
      });
    }
  }

  @HostListener("dragleave", ["$event"])
  onDragLeave(ev: Event) {
    ev.preventDefault();
    ev.stopPropagation();
    if (this.el.nativeElement === ev.target) {
      this.drag$.subscribe(dragData => {
        if (this.dropTags.indexOf(dragData.tag) > -1) {
          this.rd.removeClass(this.el.nativeElement, this.dragEnterClass);
        }
      });
    }
  }

  @HostListener("drop", ["$event"])
  onDrop(ev: Event) {
    ev.preventDefault();
    ev.stopPropagation();
    if (this.el.nativeElement === ev.target) {
      this.drag$.subscribe(dragData => {
        if (this.dropTags.indexOf(dragData.tag) > -1) {
          this.rd.removeClass(this.el.nativeElement, this.dragEnterClass);
          this.dropped.emit(dragData);
          this.service.clearDragData();
        }
      });
    }
  }
}

我想要在指定的元素发生拖拽的时候执行我想要的方法、以及改变对应的样式

drap-drop.service.ts

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";

export interface DragData {
  tag: string; // 用于标识该拖拽对象，在具有多个可拖拽的层级中标识该层级，需要用户自己维护唯一性
  data: any; // 要传递的数据
}

@Injectable()
export class DragDropService {
  private _dragData = new BehaviorSubject<DragData>(null); //总能记住上一次的值

  setDragData(data: DragData) {
    this._dragData.next(data);
  }

  getDragData(): Observable<DragData> {
    return this._dragData.asObservable();
  }

  clearDragData() {
    this._dragData.next(null);
  }
}

task-home.component.html

<div class="task-lists">
  <app-task-list 
        *ngFor="let list of lists" 
        app-droppable
        [dropTags]="['task-item', 'task-list']"
        [dragEnterClass]="'drag-enter'"
        [app-draggable]="true"
        [dragTag]="'task-list'"
        [draggedClass]="'drag-start'"
        [dragData]="list"
        (dropped)="handleMove($event, list)" >
    <app-task-header [header]='list.name' (newTask)="launchNewTaskDialog()" (moveAll)="launchCopyTaskDialog()" (delList)="launchConfirm()"
      (editList)="launchEditListDialog()">
    </app-task-header>
    <app-task-item class="list-container" *ngFor="let task of list.tasks" [item]="task" (taskClick)="launchUpdateTaskDialog(task)">
    </app-task-item>
  </app-task-list>
</div>
<button md-fab type="button" class="fab-button" (click)="launchNewListDialog()">
  <md-icon>add</md-icon>
</button>

task-home.component.ts

import {
  Component,
  OnInit,
  HostBinding,
  ChangeDetectorRef,
  ChangeDetectionStrategy
} from "@angular/core";
import { MdDialog } from "@angular/material";
import { NewTaskComponent } from "../new-task/new-task.component";
import { CopyTaskComponent } from "../copy-task/copy-task.component";
import { ConfirmDialogComponent } from "../../shared/confirm-dialog/confirm-dialog.component";
import { NewTaskListComponent } from "../new-task-list/new-task-list.component";
import { slideToright } from "../../anims/router.anim";

@Component({
  selector: "app-task-home",
  templateUrl: "./task-home.component.html",
  styleUrls: ["./task-home.component.scss"],
  animations: [slideToright],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TaskHomeComponent implements OnInit {
  @HostBinding("@routeAnim") state;
  lists = [
    {
      id: 1,
      name: "待办",
      tasks: [
        {
          id: 1,
          desc: "任务一: 去星巴克买咖啡",
          completed: true,
          priority: 3,
          owner: {
            id: 1,
            name: "张三",
            avatar: "avatars:svg-11"
          },
          dueDate: new Date(),
          reminder: new Date()
        },
        {
          id: 2,
          desc: "任务二:完成老师布置的ppt作业",
          completed: false,
          priority: 2,
          owner: {
            id: 1,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date(),
          reminder: new Date()
        }
      ]
    },
    {
      id: 2,
      name: "进行中",
      tasks: [
        {
          id: 1,
          desc: "任务三: 项目代码评审",
          completed: false,
          priority: 1,
          owner: {
            id: 1,
            name: "王五",
            avatar: "avatars:svg-13"
          },
          dueDate: new Date(),
          reminder: new Date()
        },
        {
          id: 2,
          desc: "任务四:制定项目计划",
          completed: false,
          priority: 2,
          owner: {
            id: 1,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date()
        }
      ]
    }
  ];
  constructor(private dialog: MdDialog, private cd: ChangeDetectorRef) {}

  ngOnInit() {}

  launchNewTaskDialog() {
    const dialogRef = this.dialog.open(NewTaskComponent, {
      data: { title: "新建任务" }
    });
  }

  launchCopyTaskDialog() {
    const dialogRef = this.dialog.open(CopyTaskComponent, {
      data: { lists: this.lists }
    });
  }

  launchUpdateTaskDialog(task) {
    const dialogRef = this.dialog.open(NewTaskComponent, {
      data: { title: "修改任务", task: task }
    });
  }

  launchConfirm() {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title: "修改任务列表", content: "您确认删除该任务列表吗？" }
    });
  }

  launchEditListDialog() {
    const dialogRef = this.dialog.open(NewTaskListComponent, {
      data: { title: "更改列表名称" }
    });
    dialogRef.afterClosed().subscribe(result => console.log(result));
  }

  launchNewListDialog() {
    const dialogRef = this.dialog.open(NewTaskListComponent, {
      data: { title: "新建列表名称" }
    });
    dialogRef.afterClosed().subscribe(result => console.log(result));
  }

  handleMove(srcData, list) {
    console.log(srcData)
    switch (srcData.tag) {
      case "task-item":
        console.log("handling item");
        break;
      case "task-list":
        console.log("handling list");
        break;
      default:
        break;
    }
  }
}

我想要我的handleMove($event,list)方法执行，但是没有反应。！

git: https://github.com/yyccQQu/04...

Answer 1

代码有点多，我暂时clone你的项目加了个断点试了一下，意思是拖拽task-item为什么handleMove不被调用？是这个意思吗？

我加了个断点，

然后drag后drop，尝试输出this.el.nativeElement === ev.target的结果

这个你阻止冒泡了，按你的逻辑肯定不触发啊 - -0

这是你两个对比元素的引用对象输出：

Answer 2

效果是OK的、布局以及对象错了，事件时能够执行的