angular 绑定自定义属性_angular2自定义属性的使用?

郝昊天
2023-12-01

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

首先,是自定义的文件

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)方法执行,但是没有反应。!

 类似资料: