Question

我正在使用HTML 5拖放Angular 4.我创建了两个自定义属性指令来处理拖放事件。

一切正常，除非我试图拖动组件选择器，我希望它应该转换为HTML元素。但组件选择器本身就存在 -

<div><ang-textfield></ang-textfield></div>

我实施了ang-textfield组件选择器，并添加到app.module declarations

这是两个指令 -

@Directive({ selector: '[dragTextField]' })
export class DragTextFieldDirective {

public textFieldFlag: true;

constructor(private el: ElementRef) { }

@HostListener('dragstart', ['$event']) ondragstart(event) {
    this.dragstart_handler(event);
}

private dragstart_handler(event) {
    let textfield_dom = "<ang-textfield></ang-textfield>";
    event.dataTransfer.setData("text", textfield_dom);
    event.dataTransfer.setData("text/plain", textfield_dom);
    event.dataTransfer.setData("text/html", textfield_dom);
    event.dataTransfer.setData("text/uri-list", textfield_dom);
    event.dropEffect = "copy";
}}

@Directive({ selector: '[dropFields]' })
export class DropFieldsDirective {

constructor(private el: ElementRef) { }

@HostListener('drop', ['$event']) ondrop(event) {
    event.preventDefault();
    this.drop_handler(event);
}

@HostListener('dragover', ['$event']) ondragover(event) {
    event.preventDefault();
    this.drag_over_handler(event);
}

private drop_handler(event) {
    var data = event.dataTransfer.getData("text/html");
    var div = document.createElement('div');
    div.innerHTML = data;
    console.log(div);
    event.target.appendChild(div);
    return false;
}

private drag_over_handler(event) {
    event.dataTransfer.dropEffect = "copy";
}}

我实现了ang-textfield组件选择器输出 Textfield ，如 -

<div><label>Textfield</label><input type="text" /></div>

以下是ang-textfield实施 -

import { Component } from '@angular/core';

@Component({
selector: 'ang-textfield',
templateUrl: './textfield.component.html'
})

export class TextFieldViewComponent {

constructor(){

}}

这是ng-module -

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    BrowserModule,
    HttpModule,
    MdTabsModule,
    MdInputModule,
    MdButtonModule,
    MdCardModule,
    BrowserAnimationsModule
],
declarations: [
    AppComponent,
    FormsViewComponent,
    EmailViewComponent,
    MessageViewComponent,
    SettingsViewComponent,
    AdditionalSettingsViewComponent,
    FormListViewComponent,
    TextFieldViewComponent,
    AddFormViewComponent,
    AllFormsViewComponent,
    DragTextFieldDirective,
    DropFieldsDirective
],
providers: [
]
})

我的代码出了什么问题？

谢谢！

Angular 4 - 组件选择器在自定义指令中不起作用

0 个答案: