在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5/ angular2自定義屬性的使用？

angular2自定義屬性的使用？

我遇到的問(wèn)題是，我自己自定義的拖拽事件，在執(zhí)行的過(guò)程中，拖拽的時(shí)候，組件之間的樣式和定義的方法并沒(méi)有執(zhí)行。希望能幫我解決一下，謝謝了?。。?/code>

首先，是自定義的文件
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();
        }
      });
    }
  }
}

我想要在指定的元素發(fā)生拖拽的時(shí)候執(zhí)行我想要的方法、以及改變對(duì)應(yīng)的樣式

drap-drop.service.ts

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

export interface DragData {
  tag: string; // 用于標(biāo)識(shí)該拖拽對(duì)象，在具有多個(gè)可拖拽的層級(jí)中標(biāo)識(shí)該層級(jí)，需要用戶自己維護(hù)唯一性
  data: any; // 要傳遞的數(shù)據(jù)
}

@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: "任務(wù)一: 去星巴克買咖啡",
          completed: true,
          priority: 3,
          owner: {
            id: 1,
            name: "張三",
            avatar: "avatars:svg-11"
          },
          dueDate: new Date(),
          reminder: new Date()
        },
        {
          id: 2,
          desc: "任務(wù)二:完成老師布置的ppt作業(yè)",
          completed: false,
          priority: 2,
          owner: {
            id: 1,
            name: "李四",
            avatar: "avatars:svg-12"
          },
          dueDate: new Date(),
          reminder: new Date()
        }
      ]
    },
    {
      id: 2,
      name: "進(jìn)行中",
      tasks: [
        {
          id: 1,
          desc: "任務(wù)三: 項(xiàng)目代碼評(píng)審",
          completed: false,
          priority: 1,
          owner: {
            id: 1,
            name: "王五",
            avatar: "avatars:svg-13"
          },
          dueDate: new Date(),
          reminder: new Date()
        },
        {
          id: 2,
          desc: "任務(wù)四:制定項(xiàng)目計(jì)劃",
          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: "新建任務(wù)" }
    });
  }

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

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

  launchConfirm() {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title: "修改任務(wù)列表", content: "您確認(rèn)刪除該任務(wù)列表嗎？" }
    });
  }

  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)方法執(zhí)行，但是沒(méi)有反應(yīng)。！

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

回答
編輯回答
喜歡你

代碼有點(diǎn)多，我暫時(shí)clone你的項(xiàng)目加了個(gè)斷點(diǎn)試了一下，意思是拖拽task-item為什么handleMove不被調(diào)用？是這個(gè)意思嗎？

我加了個(gè)斷點(diǎn)，

clipboard.png

然后drag后drop，嘗試輸出this.el.nativeElement === ev.target的結(jié)果

clipboard.png

這個(gè)你阻止冒泡了，按你的邏輯肯定不觸發(fā)啊 - -0

這是你兩個(gè)對(duì)比元素的引用對(duì)象輸出：

clipboard.png

2018年4月10日 12:16
編輯回答
陪我終

效果是OK的、布局以及對(duì)象錯(cuò)了，事件時(shí)能夠執(zhí)行的

2017年3月8日 03:04