angular 绑定自定义属性_angular2自定义属性的使用？
我遇到的问题是，我自己自定义的拖拽事件，在执行的过程中，拖拽的时候，组件之间的样式和定义的方法并没有执行。希望能帮我解决一下，谢谢了！！！
首先，是自定义的文件
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 = 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(null); //总能记住上一次的值
setDragData(data: DragData) {
this._dragData.next(data);
}
getDragData(): Observable {
return this._dragData.asObservable();
}
clearDragData() {
this._dragData.next(null);
}
}
task-home.component.html
*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)" >
(editList)="launchEditListDialog()">
add
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)方法执行，但是没有反应。！