我需要一些关于角度拖放的参考,我浏览了角度文档,但它不起作用,我需要开发一个页面,我可以在其中将工具拖到我的画布上。如果有人知道这一点,请提供帮助。
问问题
910 次
2 回答
1
您可以从此处拖放参考。我通常使用此工具进行拖放。确保你会得到解决方案。
之后,如果您遇到任何错误,请在此处写下来。
于 2020-06-29T10:01:45.480 回答
1
您需要添加@angular/cdk
并且它是支持包。
然后包含一个调用的DragDropModule
模块app.module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule ,DragDropModule],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
在app.component.css
* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas { display:block; background-color: red } /* To remove the scrollbars */
最后在app.component.html
<canvas #ele id="canvas" ></canvas>
<div draggable="true" (dragend)="create()">
Drag
</div>
在app.component.ts
import { Component, VERSION,ViewChild,ViewContainerRef,ComponentFactoryResolver } from '@angular/core';
import { DraggableComponent } from './components/dragg.component';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
componentRef: any;
count=0;
@ViewChild('ele', { read: ViewContainerRef }) entry: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver){
}
create(){
const factory = this.resolver.resolveComponentFactory(DraggableComponent);
this.componentRef = this.entry.createComponent(factory);
this.count++;
this.componentRef.instance.text = "Draggble" +this.count;
}
}
于 2020-06-29T10:13:43.947 回答